<div id="app">\t\t<div> <input type="checkbox" v-model="all.check" @change="allCheck()">{{all.name}}</div>\t<ul>\t\t<li v-for="(list,index) in lists">\t\t\t<input type="checkbox" v-model="list.check" @change="onCure()">\t\t\t{{list.name}}\t\t</li>\t</ul></div>
<script>new Vue({\tel:'#app',\tdata:{\t\tall:{name:'全選',check:false},\t\tlists:[\t\t\t{name:'北京1',check:false},\t\t\t{name:'北京2',check:false},\t\t\t{name:'北京3',check:false},\t\t\t{name:'北京4',check:false},\t\t\t{name:'北京5',check:false},\t\t\t{name:'北京6',check:false},\t\t]\t},\tmethods:{\t\tallCheck:function(){\t\t\tthis.lists.forEach(item=>{\t\t\t\titem.check=this.all.check;\t\t\t})\t\t},\t\tonCure:function(){\t\t\t//第一種方法\t\t\t// var select=this.lists.filter(function(v){\t\t\t// \treturn v.check;\t\t\t// })\t\t\t// console.log(select.length);\t\t\t// if(select.length==this.lists.length){\t\t\t// \tthis.all.check=true;\t\t\t// }else{\t\t\t// \tthis.all.check=false;\t\t\t// }\t\t\t// select.length==this.lists.length ? this.all.check=true : this.all.check=false; //三木運算寫法\t\t\t//every()方法 :檢測陣列所有元素是否符合指定的條件,如果有一個條件不滿足,就返回false,反之返回true\t\t\t//some() : 檢測陣列中只要有一個滿足條件,返回true,都不滿足時,返回true。\t\t\tthis.all.check = this.lists.every(function(item){ return item.check });\t\t}\t}})var arr =[3,26,6,22];var a = arr.every(function(item){ //some時返回true every時返回false return item >3});console.log(a) </script>
最新評論