vue li列表实现单击之后文字颜色改变,单击其它的li之后,文字颜色恢复

可以通过以下的方式来实现：

1. 在li标签中添加一个点击事件，例如@click，绑定一个方法，例如changeColor。

2. 在changeColor方法中，使用Vue的class绑定语法，给当前li标签绑定一个CSS类，例如"active"，表示选中状态。

3. 在li标签中添加一个class绑定，绑定一个变量，例如isActive，用来控制li标签是否处于选中状态。初始值为false。

4. 在changeColor方法中，将当前li标签的isActive变量值设为true，表示选中状态。

5. 在li标签上使用v-for循环渲染一个数组，数组中存储每个li标签的文本内容。

6. 在changeColor方法中，遍历数组，将其它li标签的isActive变量值设为false，表示恢复状态。

7. 在CSS中定义.active类的样式，例如修改文字颜色。

示例代码如下：

HTML模板：

<ul>
  <li v-for="(item,index) in list" :key="index" :class="{active: item.isActive}" @click="changeColor(item)">
    {{item.text}}
  </li>
</ul>

JavaScript代码：

export default {
  data() {
    return {
      list: [
        {text: '列表项1', isActive: false},
        {text: '列表项2', isActive: false},
        {text: '列表项3', isActive: false},
        {text: '列表项4', isActive: false},
      ]
    }
  },
  methods: {
    changeColor(item) {
      item.isActive = true;
      this.list.forEach((li) => {
        if (li !== item) {
          li.isActive = false;
        }
      });
    }
  }
}

CSS样式：

.active {
  color: red;
}