Vue实现tab切换效果

本文主要讲述利用Vue实现简单的tab切换效果，有需要的朋友可以参考

1. html部分布局

html部分代码如下所示：

<div id="app">
    <ul class="tab-tilte">
        <li>标题一</li>
        <li>标题二</li>
        <li>标题三</li>
        <li>标题四</li>
    </ul>
    <div class="tab">
        <div>内容一</div>
        <div>内容二</div>
        <div>内容三</div>
        <div>内容四</div>
    </div>
</div>

2. 给选中部分加css样式

css部分代码如下所示：

li.hx_activity{
	color: #2DA7E0;
	border-bottom: 2px solid #2DA7E0;
}

3. 引入vue.js实现效果

js部分代码如下所示：

<script src="js/vue.js"></script>
<script type="text/javascript">
	new Vue({
	    el: '#app',
	    data: {
			current:0,//默认选中第一个
	    }
	})