自己学习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>