当前位置：首页 > VUE

vue按钮实现多选

2026-02-17 18:26:42VUE

Vue按钮实现多选的方法

使用`v-model`绑定数组

通过v-model绑定一个数组类型的变量，当按钮被选中时，其值会自动添加到数组中。需要为每个按钮设置唯一的value属性。

<template>
  <div>
    <button 
      v-for="option in options" 
      :key="option.value"
      v-model="selectedOptions"
      :value="option.value"
    >
      {{ option.label }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'A', label: '选项A' },
        { value: 'B', label: '选项B' },
        { value: 'C', label: '选项C' }
      ],
      selectedOptions: []
    }
  }
}
</script>

自定义样式与状态

结合CSS类动态切换选中状态，使用:class绑定根据数组是否包含当前值来添加激活样式。

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

<script>
export default {
  methods: {
    toggleOption(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>

使用第三方组件库

若项目中使用Element UI或Vuetify等库，可直接调用其多选按钮组件。

Element UI示例：

<template>
  <el-checkbox-group v-model="selectedOptions">
    <el-checkbox-button 
      v-for="option in options"
      :key="option.value"
      :label="option.value"
    >
      {{ option.label }}
    </el-checkbox-button>
  </el-checkbox-group>
</template>

Vuetify示例：

vue按钮实现多选

<template>
  <v-btn-toggle v-model="selectedOptions" multiple>
    <v-btn v-for="option in options" :key="option.value" :value="option.value">
      {{ option.label }}
    </v-btn>
  </v-btn-toggle>
</template>