使用 vue 的过滤器和计算属性实现 全选/非全选

1、html 部分

<div id="app"> <div> <input type="checkbox" v-model="isAll"> <span>全选/非全选 <input type="checkbox" :id="item.id|handleId" :value="item.value" v-model="checkList" />  <label :for="item.id|handleId" v-text="item.sname"> el: "#app", data: { poetList: [ { id: 1, sname: '李白', value: 'LiBai' }, { id: 2, sname: '杜甫', value: 'DuFu' }, { id: 3, sname: '贺知章', value: 'HeZhiZhang' }, { id: 4, sname: '李商隐', value: 'LiShangYin' }, { id: 5, sname: '屈原', value: 'QuYuan' } ], checkList: [] }, // 过滤器 filters: { handleId(value) { return 'poet' + value; } }, // 计算属性 computed: { isAll: { get() { return this.checkList.length === this.poetList.length; }, set(value) { if (value) { this.poetList.forEach(item => { this.checkList.push(item.value); }); return; } else { this.checkList = []; } } } } });