vue实现active多选
实现多选 active 状态的方法
在 Vue 中实现多选 active 状态，可以通过动态绑定 class 或 style 来实现。以下是几种常见的方法：
方法一：使用数组存储选中项
<template>
<div>
<div
v-for="item in items"
:key="item.id"
@click="toggleSelect(item)"
:class="{ active: selectedItems.includes(item) }"
>
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
],
selectedItems: []
}
},
methods: {
toggleSelect(item) {
const index = this.selectedItems.findIndex(i => i.id === item.id)
if (index === -1) {
this.selectedItems.push(item)
} else {
this.selectedItems.splice(index, 1)
}
}
}
}
</script>
<style>
.active {
background-color: #42b983;
color: white;
}
</style>方法二：使用对象存储选中状态
<template>
<div>
<div
v-for="item in items"
:key="item.id"
@click="toggleSelect(item.id)"
:class="{ active: selected[item.id] }"
>
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
],
selected: {}
}
},
methods: {
toggleSelect(id) {
this.$set(this.selected, id, !this.selected[id])
}
}
}
</script>方法三：使用 v-model 和复选框
如果需要更标准的多选功能，可以使用复选框：
<template>
<div>
<div v-for="item in items" :key="item.id">
<input
type="checkbox"
:id="'item-' + item.id"
:value="item"
v-model="selectedItems"
>
<label :for="'item-' + item.id">{{ item.name }}</label>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
],
selectedItems: []
}
}
}
</script>注意事项
- 使用数组存储选中项时，要注意对象的引用比较问题，可能需要根据 id 进行比较
- 使用对象存储状态时，要确保响应式更新，可以使用
this.$set - 样式可以根据需求自定义，active 类名可以替换为其他名称
- 对于大量数据，考虑使用更高效的数据结构来存储选中状态
以上方法可以根据具体需求选择使用，都能实现多选 active 状态的功能。
