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;
    }
}