Vue中实现多选高亮效果

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      selectedItems: []
    };
  },
  methods: {
    toggleSelection(index) {
      if (this.isSelected(index)) {
        // 如果项目已选中，则取消选中
        const selectedIndex = this.selectedItems.indexOf(index);
        this.selectedItems.splice(selectedIndex, 1);
      } else {
        // 如果项目未选中，则添加到选中列表中
        this.selectedItems.push(index);
      }
    },
    isSelected(index) {
      return this.selectedItems.includes(index);
    }
  }
};
</script>

<style>
.selected {
  background-color: yellow;
}
</style>