在使用jQuery類庫實現(xiàn)tab功能時，是獲取鼠標在mousenter或click時的index值，然后切換到當(dāng)前的標題和內(nèi)容，把其他的標題和內(nèi)容的狀態(tài)去掉：

$('.tab .title').find('.item')
    .removeClass('current').eq(index).addClass('current'); // 為index位置的title添加current$('.tab .content').find('.item')
    .hide().eq(index).show(); // 顯示index位置的內(nèi)容

那么在使用vue實現(xiàn)tab功能時，就不是像jQuery這種直接操作DOM了。我這里總結(jié)了下實現(xiàn)tab功能的3個思路，僅供參考。

1. 切換content或者直接切換內(nèi)容

這種思路下，我們首先把結(jié)構(gòu)搭建起來，然后用一個變量selected表示tab當(dāng)前展示的位置，給li標簽添加mouseenter或click事件，將當(dāng)前的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, //當(dāng)前位置
        list: [            {
&nb