vue实现反选功能
时间: 2023-06-29 20:05:31 浏览: 35
反选功能可以通过绑定一个布尔值的变量来实现。比如,我们可以绑定一个 `isCheckedAll` 变量表示是否全选,以及一个数组 `items` 存储所有可选项。然后在模板中通过 `v-model` 绑定 `isCheckedAll` 变量来控制全选/取消全选。最后,我们在每个可选项上绑定一个 `v-model` 来控制其是否被选中。代码如下:
```html
<template>
<div>
<input type="checkbox" v-model="isCheckedAll"> 全选/取消全选
<div v-for="(item, index) in items" :key="index">
<input type="checkbox" v-model="item.checked"> {{ item.label }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
isCheckedAll: false,
items: [
{ label: '选项1', checked: false },
{ label: '选项2', checked: false },
{ label: '选项3', checked: false }
]
}
},
watch: {
isCheckedAll(val) {
this.items.forEach(item => item.checked = val);
}
}
}
</script>
```
在上面的代码中,我们使用了一个 `watch` 监听器来实现全选/取消全选的功能。当 `isCheckedAll` 发生变化时,我们遍历 `items` 数组,将每个可选项的 `checked` 属性设置为 `isCheckedAll` 的值,从而实现全选/取消全选的效果。