vue.js实现全选 和反选

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

猜你喜欢

转载自blog.csdn.net/lwang_IT/article/details/82811587
今日推荐