Vue 复选框 checkbox 全选与取消全选

Vue 复选框 checkbox 全选与取消全选

组件

<template>
	<p>
			全选：
		</p>
		<input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()">
		<label for="checkbox">
			{{checked}}
		</label>
		<p>
			多个复选框：
		</p>
		<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
		<label for="runoob">
			Runoob
		</label>
		<input type="checkbox" id="google" value="Google" v-model="checkedNames">
		<label for="google">
			Google
		</label>
		<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
		<label for="taobao">
			taobao
		</label>
		<br>
		<span>
			选择的值为:{{checkedNames}}
		</span>
</template>

数据

 data() {
            return {
                checked: false,
				checkedNames: [],
				checkedArr: ["Runoob", "Taobao", "Google"]
            };
        },

方法

	methods: {
		changeAllChecked: function() {
			if (this.checked) {
				this.checkedNames = this.checkedArr
			} else {
				this.checkedNames = []
			}
		}
	},
	watch: {
		"checkedNames": function() {
			if (this.checkedNames.length == this.checkedArr.length) {
				this.checked = true
			} else {
				this.checked = false
			}
		}
	}