在
Vue2
中，想要实现
多选框的全选效果并利用`v-model`进行状态管理，你可以这样做：
首先，在模板
中，你需要创建一个
多选框数组，每个元素都有一个`value`属性，用于关联用户的选择，并
使用`v-model`绑定到一个数组，比如`selectedOptions`。
```html
<template>
<div>
<ul>
<li v-for="(option, index) in options" :key="index">
<input type="checkbox" :value="option.value" v-model="selectedOptions">
{{ option.label }}
</li>
</ul>
<button @click="toggleAll">全选/取消全选</button>
</div>
</template>
```
接下来，定义组件的data部分，初始化`selectedOptions`为空数组，以及`options`数组作为你的多选项列表。
```javascript
export default {
data() {
return {
selectedOptions: [], // 存储被选择的选项
值
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
... // 其他选项
],
};
},
};
```
然后，在methods里添加`toggleAll`方法，这个方法会遍历`options`数组，如果所有选项都被选
中，则清空`selectedOptions`，反之则设置它等于`options`的所有
值。
```javascript
methods: {
toggleAll() {
this.selectedOptions = this.options.length ? [] : this.options.map(item => item.value);
},
},
```
最后，为了
监听`selectedOptions`的变化并触发`toggleAll`方法，可以在`watch`选项
中监听这个变化：
```javascript
watch: {
selectedOptions(newVal, oldVal) {
if (newVal !== oldVal) {
this.toggleAll();
}
},
},
```
当`selectedOptions`数组发生变化时，`toggleAll`会被自动调用，实现了
多选框的全选/取消全选效果。
扫一扫
497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
