vue实现active多选

实现多选高亮（active）效果

在Vue中实现多选高亮效果可以通过以下方式完成：

使用v-for和v-bind:class

通过动态绑定class实现选中状态切换，适用于列表项多选场景：

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.id"
      @click="toggleSelect(item)"
      :class="{ active: selectedItems.includes(item) }"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    }
  },
  methods: {
    toggleSelect(item) {
      const index = this.selectedItems.findIndex(i => i.id === item.id)
      if (index === -1) {
        this.selectedItems.push(item)
      } else {
        this.selectedItems.splice(index, 1)
      }
    }
  }
}
</script>

<style>
.active {
  background-color: #42b983;
  color: white;
}
</style>

使用复选框组实现

通过v-model绑定数组实现多选，适合表单场景：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        :id="'item-' + item.id" 
        :value="item" 
        v-model="selectedItems"
      >
      <label :for="'item-' + item.id">{{ item.name }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    }
  }
}
</script>

使用计算属性优化

对于大型列表，可以使用计算属性优化性能：

computed: {
  isSelected() {
    return (item) => this.selectedItems.some(selected => selected.id === item.id)
  }
}

模板中使用：

<div 
  v-for="item in items" 
  :key="item.id"
  @click="toggleSelect(item)"
  :class="{ active: isSelected(item) }"
>
  {{ item.name }}
</div>

使用Set提高查找效率

当处理大量数据时，使用Set代替数组可以提高查找效率：

data() {
  return {
    selectedItems: new Set()
  }
},
methods: {
  toggleSelect(item) {
    if (this.selectedItems.has(item.id)) {
      this.selectedItems.delete(item.id)
    } else {
      this.selectedItems.add(item.id)
    }
  }
}

自定义指令实现

创建自定义指令实现高亮逻辑复用：

Vue.directive('selectable', {
  bind(el, binding, vnode) {
    el.addEventListener('click', () => {
      const vm = vnode.context
      vm.toggleSelect(binding.value)
    })
  },
  update(el, binding, vnode) {
    const vm = vnode.context
    el.classList.toggle('active', vm.isSelected(binding.value))
  }
})

使用方式：

<div 
  v-for="item in items" 
  :key="item.id"
  v-selectable="item"
>
  {{ item.name }}
</div>