vue v-for出来的内容点击改变文字颜色

 HTML部分

<tr v-for="(item, i) in list" :key="i" :class="{active:i==active}" @click="listclick(i)">
    <td>{{ item.name }}</td>
</tr>

css部分

.active{
  color: #0276fd;
}

 JS部分

在data中给一个值

data() {
  return() {
    active: -1,
    list: ['小明','小红','小军']
  }
}

 在listclick()这个方法中进行判断

listclick(i) {
    if (i == this.active) {
        this.active= -1; // 经过if判断,点击一次就会变色,再次点击就会取消变色
    } else {
        this.active= i;
    }
}


版权声明:本文为hh994原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。