vue按钮实现多选
Vue 按钮实现多选的方法
使用 v-model 绑定数组
通过 v-model 绑定一个数组，当按钮被选中时，值会自动添加到数组中，取消选中时从数组中移除。适用于复选框或自定义样式的按钮组。
<template>
<div>
<button
v-for="option in options"
:key="option.value"
@click="toggleSelection(option.value)"
:class="{ active: selectedValues.includes(option.value) }"
>
{{ option.label }}
</button>
<p>已选: {{ selectedValues }}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
],
selectedValues: []
};
},
methods: {
toggleSelection(value) {
const index = this.selectedValues.indexOf(value);
if (index === -1) {
this.selectedValues.push(value);
} else {
this.selectedValues.splice(index, 1);
}
}
}
};
</script>
<style>
.active {
background-color: #42b983;
color: white;
}
</style>使用 v-model 与复选框
直接利用 <input type="checkbox"> 的多选特性，结合 v-model 绑定数组实现多选。
<template>
<div>
<div v-for="option in options" :key="option.value">
<input
type="checkbox"
:id="option.value"
:value="option.value"
v-model="selectedValues"
>
<label :for="option.value">{{ option.label }}</label>
</div>
<p>已选: {{ selectedValues }}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
],
selectedValues: []
};
}
};
</script>使用第三方组件库
若使用 Element UI 或 Ant Design Vue 等库，可直接调用其多选按钮组件。
Element UI 示例：
<template>
<el-checkbox-group v-model="selectedValues">
<el-checkbox-button
v-for="option in options"
:key="option.value"
:label="option.value"
>
{{ option.label }}
</el-checkbox-button>
</el-checkbox-group>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
],
selectedValues: []
};
}
};
</script>注意事项
- 数据绑定：确保
v-model绑定的是数组类型，否则多选功能无法生效。 - 样式控制：自定义按钮时需通过
:class动态切换选中状态的样式。 - 性能优化：若选项数量较大，建议使用虚拟滚动（如
vue-virtual-scroller）提升渲染效率。
