Vue中,单击选项实现全选,点击全选实现按钮选中

页面布局:

<ul>
	  	<dt><input type="checkbox" @click="quan" v-model="check" :checked="check?'checked':''">全选</dt>
	  	<li v-for="(item,index) in item"><input type="checkbox" :checked="item.ch" @click='dax(index,$event.target.checked)' >{{item.name}}</li>
</ul>

效果实现:

data(){
	return {
		check:false,
		item:[
			{id:1,name:"one",ch:false},
			{id:2,name:"two",ch:false},
			{id:3,name:"three",ch:false},
			{id:4,name:"four",ch:false},
			{id:5,name:"five",ch:false},
			{id:6,name:"six",ch:false},
			{id:7,name:"seven",ch:false},
			{id:8,name:"eight",ch:false},
		],
		dx:0
	}  
  },
  methods:{
	 
	  quan(){
		  this.check = !this.check
            for(var i=0;i<this.item.length;i++){
                this.item[i].ch = this.check
            }
	  },
	  dax(v,s){
		 this.item[v].ch = s
		 let a = this.item.filter(item => item.ch)
		 if(a.length == this.item.length){
			 this.check=true
		 }else{
			 this.check = false
		 }
	  }
	  
  }