vue.js實現全選 和反選
阿新 • • 發佈:2018-12-11
自己學習vue的一個小例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <input type="checkbox" id='a' v-model="a"/>全選 <br /> <input type="checkbox" id='a' v-on:click="cliboxs"/>反選 <br /> <input type='checkbox' id="b" value="1" v-model="b1"/> <input type='checkbox' id="b" value="2" v-model="b1"/> <input type='checkbox' id="b" value="3" v-model="b1"/> </div> <script> new Vue({ el:'#app', data:{ a:false, b1:[], b2:[1,2,3] }, methods:{ cliboxs:function(){ //filter()方法使用指定的函式測試所有元素,並建立一個包含所有通過測試的元素的新陣列。 var s=JSON.stringify(this.b1); var intersection = this.b2.filter(function(v){ return s.indexOf(v)==-1;//返回沒有被選中的 }) this.b1=intersection; } }, watch:{ a:function(){ if(!this.a){//不選中 this.b1=[]; }else{ this.b1=this.b2; } }, b1:function(){ if(this.b1.length==this.b2.length){ this.a=true; }else{ this.a=false; } } } }) </script> </body> </html>