Vue.js는 checkbox의 전체 선택과 반선택을 실현합니다

1.html

2.js

	export default {
	methods:{
	  checkedAll: function() {
		var _this = this;
		console.log(_this.checkboxModel);
		if (this.checked) {//    
		  _this.checkboxModel = [];
		}else{//    
		  _this.checkboxModel = [];
		  _this.checkboxData.forEach(function(item) {
			_this.checkboxModel.push(item.id);
		  });
		}
	  }
	},
	watch: {//   watcher
	  'checkboxModel': {
		handler: function (val, oldVal) { 
		  if (this.checkboxModel.length === this.checkboxData.length) {
			this.checked=true;
		  }else{
			this.checked=false;
		  }
		},
		deep: true
	  }
	},
	data () {
	  return {
		checkboxData:[{
		  id:'1',
		  value:'  '
		},{
		  id:'2',
		  value:'  '
		},{
		  id:'3',
		  value:'  '
		},{
		  id:'4',
		  value:'   '
		}],
		checkboxModel:['1','3','4'],
		checked:""
	  }
	}
	export default {
	methods:{
	  checkedAll: function() {
		var _this = this;
		console.log(_this.checkboxModel);
		if (this.checked) {//    
		  _this.checkboxModel = [];
		}else{//    
		  _this.checkboxModel = [];
		  _this.checkboxData.forEach(function(item) {
			_this.checkboxModel.push(item.id);
		  });
		}
	  }
	},
	watch: {//   watcher
	  'checkboxModel': {
		handler: function (val, oldVal) { 
		  if (this.checkboxModel.length === this.checkboxData.length) {
			this.checked=true;
		  }else{
			this.checked=false;
		  }
		},
		deep: true
	  }
	},
	data () {
	  return {
		checkboxData:[{
		  id:'1',
		  value:'  '
		},{
		  id:'2',
		  value:'  '
		},{
		  id:'3',
		  value:'  '
		},{
		  id:'4',
		  value:'   '
		}],
		checkboxModel:['1','3','4'],
		checked:""
	  }
	}

	}

3.watch
유형: Object상세: 하나의 대상, 키는 관찰 표현식이고 값은 대응 리셋이다.값은 방법명 또는 대상일 수도 있고 옵션을 포함할 수도 있습니다.실례화할 때 키마다 호출합니다 $watch().
예:

var vm = new Vue({
  data: {
    a: 1
  },
  watch: {
    'a': function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    //    
    'b': 'someMethod',
    //    watcher
    'c': {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    }
  }
})
vm.a = 2 // -> new: 2, old: 1