vue全选和反选

欢迎访问我的博客地址 : 博客地址

注释为反选

<div class="checkbox"><input type="checkbox" v-model="checkout"@click="handleClick" >全选<ul><li v-for="(items,key) of checkLists" :key="key" ><input type="checkbox" :value="key+1" v-model="checkList">{{items.id}}、{{items.name}}--{{items.age}}--{{items.sex}}</li></ul></div><script>var checkbox=new Vue({el:".checkbox",data(){return{"checkLists":[{"id":"1","name":"小张","age":"15岁","sex":"男"},{"id":"2","name":"小王","age":"16岁","sex":"女"},{"id":"3","name":"小李","age":"17岁","sex":"女"}],"checkout":false,// "checkout":true,"checkList":[]}},watch:{checkList(){if(this.checkLists.length==this.checkList.length){this.checkout=true}else{this.checkout=false}// if(this.checkLists.length==this.checkList.length){//this.checkout=false;// }else{// this.checkout=true;// }}},methods:{handleClick(){if(this.checkout){//this.checkLists.forEach((res)=>{// if(this.checkLists.indexOf(res.id)==-1){// this.checkList.push(res.id)// }// })this.checkList=[]}else{this.checkLists.forEach((res)=>{if(this.checkLists.indexOf(res.id)==-1){this.checkList.push(res.id)}})// this.checkList=[] }}}})</script>

效果图: