vue 多个li，实现点击后更改背景，再次点击取消背景

可以使用 Vue 的 v-bind:class 指令实现这个效果。具体实现步骤如下：

1. 在 data 中定义一个变量，用于保存当前被选中的 li 的索引：

   data() {
     return {
       selectedIndex: -1, // 初始值为 -1，表示没有任何 li 被选中
       ...
     }
   }

2. 在模板中遍历 li，为每个 li 绑定一个点击事件，同时根据当前被选中的索引，为 li 动态添加类名：

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

其中，active 是用来表示选中状态的类名，handleClick 是点击事件的处理函数，它接收一个参数 index，表示当前点击的 li 的索引。

3. 实现 handleClick 方法，根据当前被选中的索引，更新 selectedIndex 的值：

   methods: {
     handleClick(index) {
       if (this.selectedIndex === index) {
         // 如果当前点击的是已选中的 li，则取消选中状态
         this.selectedIndex = -1;
       } else {
         // 如果当前点击的是未选中的 li，则将其设为选中状态
         this.selectedIndex = index;
       }
     },
     ...
   }

这样，当用户点击一个 li 时，会先判断它是否已经被选中，如果是，则取消选中状态；如果不是，则将其设为选中状态，同时取消之前选中的 li 的选中状态。

最后，为选中状态的 li 添加样式即可，比如：

<style>
.active {
  background-color: #ccc;
}
</style>

这样，用户点击一个 li 时，它的背景色会变成灰色，再次点击时会取消选中状态，背景色变回原来的颜色。