vue裡如何實現tab類似的切換class?
阿新 • • 發佈:2019-01-05
很多種方法可以實現你想要的效果:程式碼示例:
<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>