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

### 回答1：
你可以在给 `li` 元素绑定点击事件，在点击事件处理函数中，通过修改元素的 class 来改变文字的颜色。具体方法如下：

1. 在组件的 data 里定义一个变量来存储当前选中的 `li` 的索引值，比如：

   data() {
     return {
       currentIndex: null
     }
   }

2. 在模板中为 `li` 元素绑定点击事件，并在事件处理函数中设置 `currentIndex` 的值为当前点击的 `li` 的索引值。比如：

   <template>
     <ul>
       <li v-for="(item, index) in items" :key="index" @click="currentIndex = index">{{ item }}</li>
     </ul>
   </template>

3. 为 `li` 元素添加一个动态绑定的 class，在 class 中使用三目运算符根据 `currentIndex` 的值来判断当前 `li` 是否被选中。比如：

   <template>
     <ul>
       <li v-for="(item, index) in items" :key="index" @click="currentIndex = index" :class="{ 'selected': currentIndex === index }">{{ item }}</li>
     </ul>
   </template>

4. 在组件的样式中定义选中的 `li` 元素的样式，比如：

   <style>
     .selected {
       color: red;
     }
   </style>

综上，完整的代码如下：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index" @click="currentIndex = index" :class="{ 'selected': currentIndex === index }">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: null
    }
   

### 回答2：
实现vue li列表单击之后文字颜色改变，需要以下步骤：

1. 在vue的data中定义一个变量selectedItem，用于存储被选中的li的索引，默认值为-1。
2. 在li元素上绑定一个点击事件(click)，触发该事件时调用一个方法changeColor(index)，传入当前li的索引。
3. 在changeColor方法中，将selectedItem的值修改为当前li的索引index。
4. 在li的class属性中使用三元表达式，判断如果当前li的索引与selectedItem相等，则添加一个样式类，用于改变文字颜色。
5. 在li的style属性中绑定一个样式对象，使用动态绑定的方式控制文字颜色，判断如果当前li的索引与selectedItem不相等，则设置默认颜色。

示例代码如下：

<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index" :class="{ 'active': index === selectedItem }" :style="{ color: index !== selectedItem ? 'black' : 'red' }" @click="changeColor(index)">
{{ item }}
</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
selectedItem: -1, // 默认没有选中任何项
list: ["选项1", "选项2", "选项3"] // li列表数据
};
},
methods: {
changeColor(index) {
this.selectedItem = index; // 将选中的li的索引赋值给selectedItem
}
}
};
</script>

<style>
.active {
font-weight: bold; // 选中项的样式
}
</style>

以上示例中，每次点击li时都会调用changeColor方法，将选中的li的索引赋值给selectedItem。然后使用三元表达式判断当前li的索引是否与selectedItem相等，如果相等则添加一个样式类，用于改变文字颜色；在style中通过动态绑定样式对象，判断当前li的索引是否与selectedItem不相等，如果不相等则设置默认颜色。这样就实现了单击li时文字颜色改变，单击其他li时文字颜色恢复的效果。  

### 回答3：
可以通过给每个li元素绑定一个点击事件，在点击事件中改变该li元素的文字颜色，并且将其他li元素的文字颜色恢复成默认的颜色。

首先，在Vue的模板中，我们需要给每个li元素绑定一个点击事件，并且绑定一个方法：

<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index" @click="changeColor(index)" :style="{color: item.color}">{{ item.text }}</li>
</ul>
</div>
</template>

然后，在Vue的script中定义一个data属性来存储li列表的数据，包括文字和颜色：

<script>
export default {
data() {
return {
list: [
{ text: '列表项1', color: 'black' },
{ text: '列表项2', color: 'black' },
{ text: '列表项3', color: 'black' },
// 其他列表项...
],
};
},
methods: {
changeColor(index) {
// 遍历所有li元素，将颜色设置为默认颜色
for (let i = 0; i < this.list.length; i++) {
this.list[i].color = 'black';
}
// 将点击的li元素的颜色设置为修改后的颜色
this.list[index].color = 'red';
},
},
};
</script>

这样，在每次单击li元素时，会调用changeColor方法，将点击的li元素的文字颜色修改为需要的颜色，并将其他li元素的文字颜色恢复成默认颜色。