vue实现多选div
实现多选 DIV 的基本思路
在 Vue 中实现多选 DIV 功能,可以通过以下方法实现。主要思路是利用 v-model 绑定选中状态,结合 CSS 类名动态切换样式。
数据准备与模板结构
定义一个数组存储可选项,并为每个选项添加 selected 属性标记选中状态:
data() {
return {
items: [
{ id: 1, text: '选项1', selected: false },
{ id: 2, text: '选项2', selected: false },
{ id: 3, text: '选项3', selected: false }
]
}
}
模板中使用 v-for 渲染选项,并通过 v-model 或事件绑定控制选中状态:
<div
v-for="item in items"
:key="item.id"
class="selectable-item"
:class="{ 'selected': item.selected }"
@click="toggleSelect(item)"
>
{{ item.text }}
</div>
切换选中状态的方法
通过点击事件切换 selected 状态:
methods: {
toggleSelect(item) {
item.selected = !item.selected;
}
}
样式设计
为选中的 DIV 添加高亮样式:
.selectable-item {
padding: 10px;
margin: 5px;
border: 1px solid #ddd;
cursor: pointer;
}
.selected {
background-color: #42b983;
color: white;
}
获取选中结果
通过计算属性过滤已选中的项:
computed: {
selectedItems() {
return this.items.filter(item => item.selected);
}
}
完整组件示例
<template>
<div>
<div
v-for="item in items"
:key="item.id"
class="selectable-item"
:class="{ 'selected': item.selected }"
@click="toggleSelect(item)"
>
{{ item.text }}
</div>
<p>已选中: {{ selectedItems.map(item => item.text).join(', ') }}</p>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: '选项1', selected: false },
{ id: 2, text: '选项2', selected: false },
{ id: 3, text: '选项3', selected: false }
]
}
},
methods: {
toggleSelect(item) {
item.selected = !item.selected;
}
},
computed: {
selectedItems() {
return this.items.filter(item => item.selected);
}
}
}
</script>
<style>
.selectable-item {
padding: 10px;
margin: 5px;
border: 1px solid #ddd;
cursor: pointer;
}
.selected {
background-color: #42b983;
color: white;
}
</style>
扩展功能
如果需要限制最大选择数量,可以在 toggleSelect 方法中添加逻辑:
toggleSelect(item) {
if (!item.selected && this.selectedItems.length >= 2) {
alert('最多选择两项');
return;
}
item.selected = !item.selected;
}






