在使用jQuery类库实现tab功能时，是获取鼠标在mousenter或click时的index值，然后切换到当前的标题和内容，把其他的标题和内容的状态去掉：
$('.tab .title').find('.item')
.removeClass('current').eq(index).addClass('current'); // 为index位置的title添加current$('.tab .content').find('.item')
.hide().eq(index).show(); // 显示index位置的内容那么在使用vue实现tab功能时，就不是像jQuery这种直接操作DOM了。我这里总结了下实现tab功能的3个思路，仅供参考。
1. 切换content或者直接切换内容
这种思路下，我们首先把结构搭建起来，然后用一个变量selected表示tab当前展示的位置，给li标签添加mouseenter或click事件，将当前的index传递进去：
html代码:
<div class="hd">
<ul class="clearfix">
<li v-for="(item, index) of list" :class="{active:selected==index}" @mouseenter="change(index)">{{item.title}}</li>
</ul></div><div v-for="(item, index) of list" :class="{active:selected==index, item:true}" v-html="item.content"></div>js代码:
var app = new Vue({
el: '#app',
data: {
selected: 0, //当前位置
list: [ {
&nb
