1. 程式人生 > >vue裡如何實現tab類似的切換class?

vue裡如何實現tab類似的切換class?

很多種方法可以實現你想要的效果:程式碼示例:

<li v-for='item in data' v-text="item.name" :class="{cur:item.iscur}" @click="setCur($index)"></li>

在methods中加入方法setCur()

setCur: function (index) {
    this.data.map(function (v,i) {
        i==index? v.iscur=true: v.iscur=false;
    });
}

方法2 :在data中增加一個iscur變數

data: {
    iscur:1,
    data:[]
}

li的寫法就變成了:

<li v-for='item in data' v-text="item.name" :class="{cur:iscur==$index}" @click="iscur=$index"></li>

備註:

vue2.0相對與之前版本修改了新的語法,
丟棄$index和$key
新陣列語法
<tr v-for="list in lists">
{{list}}
</tr>
或者
<tr v-for="(list,index)in lists">
{{index}}
</tr>