vue 多个li，实现点击后更改背景，再次点击取消背景，可点击多个li，并把每个点击的记录下来

要记录下每个点击的 li，可以使用一个数组来保存它们的索引。具体实现步骤如下：

1. 在 data 中定义一个数组，用于保存被选中的 li 的索引：

   data() {
     return {
       selectedIndexes: [], // 初始值为空数组，表示没有任何 li 被选中
       ...
     }
   }

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

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

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

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

   methods: {
     handleClick(index) {
       if (this.selectedIndexes.includes(index)) {
         // 如果当前点击的是已选中的 li，则取消选中状态
         this.selectedIndexes = this.selectedIndexes.filter(i => i !== index);
       } else {
         // 如果当前点击的是未选中的 li，则将其设为选中状态
         this.selectedIndexes.push(index);
       }
     },
     ...
   }

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

最后，根据 selectedIndexes 数组中的索引，来为选中状态的 li 添加样式即可，比如：

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

这样，用户可以点击多个 li，每个点击的 li 的索引都会被记录下来，并且它们的背景色会变成灰色，再次点击时会取消选中状态，背景色变回原来的颜色。