在使用jQuery類庫(kù)實(shí)現(xiàn)tab功能時(shí)，是獲取鼠標(biāo)在mousenter或click時(shí)的index值，然后切換到當(dāng)前的標(biāo)題和內(nèi)容，把其他的標(biāo)題和內(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實(shí)現(xiàn)tab功能時(shí)，就不是像jQuery這種直接操作DOM了。我這里總結(jié)了下實(shí)現(xiàn)tab功能的3個(gè)思路，僅供參考。
1. 切換content或者直接切換內(nèi)容
這種思路下，我們首先把結(jié)構(gòu)搭建起來(lái)，然后用一個(gè)變量selected表示tab當(dāng)前展示的位置，給li標(biāo)簽添加mouseenter或click事件，將當(dāng)前的index傳遞進(jìn)去：
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
