VUE实现点击文字添加颜色（动态修改class）

实现的原理很简单，只需要动态绑定一个class就可以了，现在分别列出三种情况

1.点击文字颜色改变，再次点击，点击的颜色改变，之前的颜色变回原来的颜色

代码如下：

<template>
  <div class="list2">
    <ul>
      <li
        v-for="(item,index) in List"
        :key="index"
        :class="{activeColor:colorIndex===index}"
        @click="changeColor(item,index)"
      >
        <span>{
   {
   item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
   
  name: "list",
  components: {
   },
  data() {
   
    return {
   
      List: [
        {
    name: "总的" },
        {
    name: "部分1" },
        {
    name: "部分2" },
        {
    name: "部分3" }
      ],
      colorIndex: -1
    };
  },
  mounted() {
   },
  methods: {
   
    changeColor(item, index) {
   
      this.colorIndex = index;
    }
  }
};