Vue实现全选反选功能

整体思路：1、点击一个单选框，记录当前的下标，存入数组A中。

                 2、定义一个空数组B，把请求到的数据赋值给这个数组。

                 3、判断A和B的长度是否相等来实现全选和反选。

下面贴出全部代码

<template>
	<div>
		<input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'>全选
		<ul v-for='checkb in checkboxData'>
			<li>
				<input type='checkbox' name='checkboxinput' class='input-checkbox' 
    v-model='checkboxModel' :value='checkb.id'>{{checkb.value}}
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				checkboxData: [{
					id: '1',
					value: '苹果'
				}, {
					id: '2',
					value: '荔枝'
				}, {
					id: '3',
					value: '香蕉'
				}, {
					id: '4',
					value: '火龙果'
				}],
				checkboxModel: [],
				checked: ""
			}
		},
		methods: {
			checkedAll: function() {
				var _this = this;
				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
			}
		},

	}
</script>