当前位置：首页 > VUE

vue 实现按钮多选

2026-01-19 00:34:47VUE

实现按钮多选功能

在Vue中实现按钮多选功能可以通过以下方法完成，主要依赖v-model绑定数组和v-for动态渲染按钮。

数据绑定与渲染

定义一个数组selectedItems用于存储选中的按钮值，同时准备可选项数据options：

data() {
  return {
    selectedItems: [], // 存储选中的值
    options: [
      { id: 1, label: '选项1' },
      { id: 2, label: '选项2' },
      { id: 3, label: '选项3' }
    ]
  }
}

模板部分

使用v-for渲染按钮，并通过v-model绑定到selectedItems。注意添加value属性：

<template>
  <div>
    <button 
      v-for="option in options" 
      :key="option.id"
      v-model="selectedItems"
      :value="option.id"
      @click="toggleSelection(option.id)"
      :class="{ active: selectedItems.includes(option.id) }"
    >
      {{ option.label }}
    </button>
  </div>
</template>

切换选中状态

通过方法toggleSelection处理点击逻辑，更新selectedItems数组：

methods: {
  toggleSelection(id) {
    const index = this.selectedItems.indexOf(id);
    if (index === -1) {
      this.selectedItems.push(id);
    } else {
      this.selectedItems.splice(index, 1);
    }
  }
}

样式增强

添加CSS高亮选中状态，提升用户体验：

button.active {
  background-color: #42b983;
  color: white;
}

替代方案：使用复选框组

若需更标准化实现，可结合<input type="checkbox">和v-model：

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