vue按钮实现多选

实现多选按钮的两种方法

方法一：使用 v-model 绑定数组

通过 v-model 绑定一个数组，选中的按钮值会自动添加到数组中。

<template>
  <div>
    <input type="checkbox" id="option1" value="option1" v-model="selectedOptions">
    <label for="option1">选项1</label>

    <input type="checkbox" id="option2" value="option2" v-model="selectedOptions">
    <label for="option2">选项2</label>

    <input type="checkbox" id="option3" value="option3" v-model="selectedOptions">
    <label for="option3">选项3</label>

    <p>已选：{{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: []
    }
  }
}
</script>

方法二：自定义多选逻辑

通过自定义逻辑实现多选功能，适合需要更复杂控制的场景。

<template>
  <div>
    <button 
      v-for="option in options" 
      :key="option.value"
      @click="toggleSelection(option.value)"
      :class="{ active: selectedOptions.includes(option.value) }"
    >
      {{ option.label }}
    </button>
    <p>已选：{{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedOptions: []
    }
  },
  methods: {
    toggleSelection(value) {
      const index = this.selectedOptions.indexOf(value)
      if (index === -1) {
        this.selectedOptions.push(value)
      } else {
        this.selectedOptions.splice(index, 1)
      }
    }
  }
}
</script>

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

注意事项

• 确保 v-model 绑定的初始值为数组类型，否则多选功能无法正常工作。
• 自定义逻辑时，注意处理选中状态的样式切换。
• 如果选项较多，建议使用组件化方式封装多选逻辑。