vue实现active多选

Vue实现多选active效果

在Vue中实现多选active效果，可以通过以下方法完成：

数据驱动方式

使用数组存储选中的项，通过v-for循环渲染列表项：

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

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

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

对象存储方式

对于更复杂的数据结构，可以使用对象存储选中状态：

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.id"
      @click="toggleSelect(item.id)"
      :class="{ active: selectedItems[item.id] }"
    >
      {{ 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(id) {
      this.$set(this.selectedItems, id, !this.selectedItems[id])
    }
  }
}
</script>

使用计算属性

对于需要频繁判断选中状态的场景，可以使用计算属性：

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

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

使用v-model和复选框

如果需要与表单提交配合，可以使用复选框实现多选：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        :id="'item-' + item.id" 
        :value="item.id" 
        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' }
      ],
      selectedItems: []
    }
  }
}
</script>

以上方法都可以实现多选active效果，根据具体需求选择最适合的方案。数据驱动的方式更符合Vue的设计理念，推荐优先考虑。