全选反选的代码操作
一：computed 计算属性必须关联至少一个响应式data数据，响应式数据改变，计算属性就改变。 推荐使用。
实例1
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>计算属性(二)</title></head><body><div id="app"><input type="checkbox" v-model="allChecked" />全选/反选<ul><li v-for="item in list"><input v-model="item.checked" type="checkbox" />{{item.name}}</li></ul></div><script src="/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {list: [{id: 1,name: "碧瑶",checked: false,},{id: 2,name: "小凡",checked: true,},{id: 3,name: "陆雪琪",checked: false,},{id: 4,name: "野狗道人",checked: true,},],},methods: {},computed: {allChecked: {// 设置值set(val) {console.log(val);// true /falsethis.list.forEach((item) => (item.checked = val));},// 取值get() {return (// 判断选中的长度是否等于总长度this.list.filter((item) => item.checked).length == this.list.length);},},},});</script></body></html>
实例2
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="app"><input type="checkbox" v-model="selected">全选/非全选<br><div v-for="item,index in hobbyList"><input type="checkbox" :value="item.value" :id="item.id|handleID" v-model="checkList"><label :for="item.id|handleID">{{item.name}}</label></div></div><script src="js/vue.min.js"></script><script type="text/javascript">let vm1 = new Vue({el: "#app",data: {hobbyList: [{id: 1,name: "唱歌",value: "sing"},{id: 2,name: "跳舞",value: "dance"},{id: 3,name: "读书",value: "read"},{id: 4,name: "画画",value: "draw"}],// 存储选中的兴趣爱好checkList: []},filters: {handleID(value) {return 'hobby' + value;}},computed: {// 存储全选按钮的选中状态selected: {get() {return this.checkList.length === this.hobbyList.length ? true : false;},set(value) {// 点击全选按钮时，修改selected的值,value存储的是选中的状态if (value) {this.hobbyList.forEach(item => {this.checkList.push(item.value);});return;}this.checkList = [];}}},methods: {}});</script></body></html>
二： watch监听器方式：监听的是data中的数据。 注：这里不能把全选按钮selected放入watch中监听，因为它的变化是由checkList变化决定的，一起监听会被一直影响，导致结果不对。
watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="app"><input type="checkbox" v-model="selected" @change="checkAll">全选/非全选<br><div v-for="item,index in hobbyList"><input type="checkbox" :value="item.value" :id="item.id|handleID" v-model="checkList"><label :for="item.id|handleID">{{item.name}}</label></div></div><script src="js/vue.min.js"></script><script type="text/javascript">let vm1 = new Vue({el: "#app",data: {hobbyList: [{id: 1,name: "唱歌",value: "sing"},{id: 2,name: "跳舞",value: "dance"},{id: 3,name: "读书",value: "read"},{id: 4,name: "画画",value: "draw"}],// 存储选中的兴趣爱好checkList: [],// 存储全选按钮的选中状态selected: false},filters: {handleID(value) {return 'hobby' + value;}},watch: {checkList() {this.selected = this.checkList.length === this.hobbyList.length ? true : false;}},methods: {checkAll() {if (this.selected) {this.hobbyList.forEach(item => {this.checkList.push(item.value);});return;}this.checkList = [];}}});</script></body></html>
三：@click点击事件方式：全选按钮添加点击事件checkAll，点击全选按钮时改变选项的点击状态。下面的选项按钮用一个div包裹，并添加change事件来监听是否全选。 注：click事件是点击之后，视图里的数据还没有更新到data数据里，所以导致data数据不是最新的状态，需要取反。change事件是视图绑定的数据发生了改变，才会去执行。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="app"><input type="checkbox" value="OK" v-model="all" @click="checkAll">全选/非全选<br><div @change="delegate"><div v-for="item,index in hobbyList"><input type="checkbox" :value="item.value" :id="item.id|handleID" v-model="checkList"><label :for="item.id|handleID">{{item.name}}</label></div></div></div><script src="js/vue.min.js"></script><script type="text/javascript">let vm1 = new Vue({el: "#app",data: {hobbyList: [{id: 1,name: "唱歌",value: "sing"},{id: 2,name: "跳舞",value: "dance"},{id: 3,name: "读书",value: "read"},{id: 4,name: "画画",value: "draw"}],// 存储选中的兴趣爱好checkList: [],// 存储全选按钮的选中状态all: []},filters: {handleID(value) {return 'hobby' + value;}},methods: {checkAll() {// click事件处理=>下面的判断要取反if (!this.all.includes('OK')) {this.hobbyList.forEach(item => {this.checkList.push(item.value);});}else {this.checkList = [];}},delegate() {this.all = this.checkList.length === 4 ? ['OK'] : [];}}});</script></body></html>
如果觉得《vue全选反选操作（computed计算属性 watch监听 @click事件）》对你有帮助，请点赞、收藏，并留下你的观点哦！
