vue实现点击某个v-for遍历的数据，改变其样式。

vue实现点击某个v-for遍历的数据，改变其样式。

前言

如下图，点击了胜负十四场，文字加粗了，添加了下划线。

二、使用步骤

这里class属性，用一个三元运算符判断，如果xzindex=index的话，那么选择listzh样式，否则的话，先择listxx样式，用:data-index="index"传入数据，当然如果只是传索引的话直接@click="dianjilist(index)"就可以了，然后方法里面接受对应的index,把index赋值给xzindex。

dianjilist(event){
var target = event.target || window.event.srcElement,
//获取对应元素的id值
id = target.getAttribute(‘data-id’);
this.xzIndex = target.getAttribute(‘data-index’);
},

总结

这里class属性，用一个三元运算符判断，如果xzindex=index的话，那么选择listzh样式，否则的话，先择listxx样式，用:data-index="index"传入数据，当然如果只是传索引的话直接@click="dianjilist(index)"就可以了，然后方法里面接受对应的index,把index赋值给xzindex。