vue 선택 및 전체 선택 기능 구현

	
	
	
	


	

		

			

				

					
  
						
					
					
name
					
age
				
			
			

				

					

					
{{item.name}}
					
{{item.age}}
				
			
		
	
	
		var list=[
			{
				name:'  ',
				age: 23,
				checked: false
			},
			{
				name:'  ',
				age: 2,
				checked: true
			},
			{
				name:'  ',
				age: 23,
				checked: true
			},
			{
				name:' bai',
				age: 40,
				checked: true
			},
			{
				name:'   ',
				age: 18,
				checked: false
			}
		]
		new Vue({
			el: '.app',
			data: {
				list,
				allchecked:false
			},
			methods:{
				changeState(val){
					this.list.forEach(item => {
		           		if (val === false) {
		           			item.checked = true
		           		} else {
		           			item.checked = false
		           		}
		           	})
				}
			},
	       	watch:{
				list:{
    				handler(val) {
    					console.log('watch     ',val)
    					var i = 0
    					this.list.forEach(item => {
		           			if(item.checked === true) i++
		           		})
		           		if (i===this.list.length) {
		           			this.allchecked = true
		           		} else {
		           			this.allchecked = false
		           		}				
    				},
    				deep:true
    			}
			}
		})