利用v-model 实现多选,全选,反选功能
时间: 2023-07-07 14:36:14 浏览: 55
可以通过以下代码实现多选、全选和反选功能:
```html
<template>
<div>
<input type="checkbox" v-model="selectAll">全选
<input type="checkbox" v-model="isAllSelected">反选
<div v-for="(item, index) in items" :key="index">
<input type="checkbox" v-model="item.selected"> {{item.name}}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ name: '选项1', selected: false },
{ name: '选项2', selected: false },
{ name: '选项3', selected: false },
],
selectAll: false,
isAllSelected: false,
};
},
watch: {
selectAll: function(value) {
this.items.forEach((item) => {
item.selected = value;
});
},
isAllSelected: function(value) {
this.items.forEach((item) => {
item.selected = !item.selected;
});
},
},
};
</script>
```
其中,`selectAll` 表示全选框的选中状态,`isAllSelected` 表示反选框的选中状态,`items` 数组包含所有选项的信息,包括名称和选中状态。通过 `v-for` 指令遍历 `items` 数组,渲染出多个复选框,并通过 `v-model` 指令将每个复选框的选中状态绑定到对应的 `item.selected` 属性上。
利用 `watch` 监听 `selectAll` 和 `isAllSelected` 的变化,当 `selectAll` 发生变化时,将所有选项的状态设置为 `selectAll` 的值;当 `isAllSelected` 发生变化时,将所有选项的状态取反。这样就实现了多选、全选和反选功能。