使用vue的change事件实现checkbox单选框的一个全选和取消全选

场景描述：

有多个单选框，想使用vue实现单选框的全选或者是取消全选

实现：

①前端代码

<!-- 全选框
	checked：判断是否选中，需要在vue中的data区进行定义
	getAllIds：全选或者取消的方法，需要在method区定义
-->
<input type="checkbox"
	v-model="checked"
	@change="getAllIds"/>
<!-- 单选框 可以存在多个或者单个
	:value="item.id"：选中之后放入数组的值
	v-model="ids"：跟ids这个数组进行双向绑定
-->	
<input type="checkbox" 
	v-for="item in testId"
	:value="item" 
	v-model="ids">
	

②js代码

//data区定义
ids: [],//选中的id
checked: false,//选中的状态
testId:[1,2,3],//测试的数组

//method区定义方法
getAllIds: function () {
	//点击全选框的时候，判断全选框的状态，以此来判断是全选还是取消全选
    if (this.checked) {//选中的话，就将数组所有的对象放进去ids里面
        testId.forEach(item=>{
			this.ids.push(item);
		});
    } else {
        this.ids = [];
    }
},

//watch监听区定义ids数组的一个监听规则
watch: {
    "ids": function () {
        if (this.ids.length == this.testId.length) {
            this.checked = true;
        } else {
            this.checked = false;
        }
    }
}