vue.js怎么动态的添加class名称以及判断只给对应的一个添加
{active:index==dynamic}">{{index}}{{listRenderingList.text}}var listRenderingVm=new Vue({el:'#listRendering',data:{listRenderingLists:[{text:'Foo'},{text:'Bar'},{text:'Foo Bar'
·
<div id="listRendering">
<ul>
<li v-for="(listRenderingList,index) in listRenderingLists" v-on:click="onclick(index)" v-bind:class=" {active:index==dynamic}">{{index}}{{listRenderingList.text}}</li>
</ul>
<ul>
<li v-for="(listRenderingList,index) in listRenderingLists" v-on:click="onclick(index)" v-bind:class=" {active:index==dynamic}">{{index}}{{listRenderingList.text}}</li>
</ul>
</div>
var listRenderingVm=new Vue({
el:'#listRendering',
data:{
listRenderingLists:[{
text:'Foo'
},{
text:'Bar'
},{
text:'Foo Bar'
}],
isActive:false,
dynamic:-1 //当点击时候点亮，同级的li标签删除Class.dynamic的值是可以改变的，默认第一个被选中就写0
},
methods:{
onclick:function(index){
// console.log(index);
// 给index为1的加字体颜色,其他的不加
// if(index==1){
// this.dynamic = index;
// }
//点击添加字体颜色，其他的删除class名称
this.dynamic = index;
}
}
});
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献4条内容
所有评论(0)