vue实现按钮多选
实现按钮多选功能
在Vue中实现按钮多选功能，可以通过以下方法完成。这里提供两种常见的实现方式：基于数组管理和使用v-model绑定。
基于数组管理选中状态
定义一个数组来存储选中的按钮值，通过v-for渲染按钮组，并使用v-on:click切换选中状态。
<template>
<div>
<button
v-for="item in options"
:key="item.value"
@click="toggleSelection(item.value)"
:class="{ active: selectedItems.includes(item.value) }"
>
{{ item.label }}
</button>
<p>已选中: {{ selectedItems }}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
],
selectedItems: []
}
},
methods: {
toggleSelection(value) {
const index = this.selectedItems.indexOf(value)
if (index === -1) {
this.selectedItems.push(value)
} else {
this.selectedItems.splice(index, 1)
}
}
}
}
</script>
<style>
.active {
background-color: #42b983;
color: white;
}
</style>使用v-model绑定多选框组
利用Vue的v-model指令与多选框组结合，实现更简洁的多选逻辑。
<template>
<div>
<div v-for="item in options" :key="item.value">
<input
type="checkbox"
:id="item.value"
:value="item.value"
v-model="selectedItems"
>
<label :for="item.value">{{ item.label }}</label>
</div>
<p>已选中: {{ selectedItems }}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
],
selectedItems: []
}
}
}
</script>自定义样式按钮组
如果需要按钮样式而非复选框，可以结合上述两种方法，使用CSS隐藏原生复选框。
<template>
<div class="button-group">
<label v-for="item in options" :key="item.value">
<input
type="checkbox"
:value="item.value"
v-model="selectedItems"
hidden
>
<span class="button" :class="{ active: selectedItems.includes(item.value) }">
{{ item.label }}
</span>
</label>
</div>
</template>
<style>
.button-group label {
margin-right: 10px;
}
.button {
display: inline-block;
padding: 8px 16px;
border: 1px solid #ddd;
cursor: pointer;
border-radius: 4px;
}
.button.active {
background-color: #42b983;
color: white;
border-color: #42b983;
}
</style>关键点说明
- 选中状态管理：使用数组存储选中值，通过数组方法实现添加/移除
- 样式切换：通过
:class绑定动态类名，根据选中状态改变按钮外观 - 数据绑定：
v-model自动处理复选框的选中状态，简化代码逻辑 - 无障碍访问：隐藏原生
input时保留功能，确保屏幕阅读器可识别
以上方法可根据实际需求选择或组合使用，适应不同的UI设计和交互需求。
