Vue的checkbox相关

普通checkbox

官网上的例子

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

【结果直接截图了】：

稍微改进一下，利用v-for

<div v-for="(item, index) in lists" :key="index">
	<input type="checkbox" v-model="checkdObj" :value="item.name">
	<label>{{item.name}}</label>
</div>
<div>
	checked: {{checkdObj}}
</div>

export default {
		name: 'Test',
		data() {
			return {
				checkdObj: [],
				lists: [
					{name: 'Jack'},
					{name: 'John'},
					{name: 'Mike'}
				]
			}
		}
	}

【结果直接截图】：

全选的checkbox

重要思路是，利用绑定长度判断来自动判定是否全选。即：
:checked=“checkObj.length === lists.length”
另外：
v-model所绑定的值是value属性

<div>
	<input type="checkbox" @change="chooseAllItem()" :checked="checkdObj.length === lists.length">
	<label>全选</label>
</div>
<hr>
<div v-for="(item, index) in lists" :key="index">
	<input type="checkbox" :value="item.name" v-model="checkdObj">
	<label>{{item.name}}</label>
</div>
<div>
	checked: {{checkdObj}}
</div>

export default {
		name: 'Test',
		data() {
			return {
				lists: [
					{name: 'Jack'},
					{name: 'John'},
					{name: 'Mike'}
				],
				checkdObj: []
			}
		},
		methods: {
			chooseAllItem() {
				if(this.checkdObj.length < this.lists.length) {
					for(let i in this.lists) {
						if(this.checkdObj.indexOf(this.lists[i].name) == -1) {
							this.checkdObj.push(this.lists[i].name);
						}
					}
				} else {
					this.checkdObj = [];
				}
			}
		}
	}

【结果也直接截图了】：

【反向操作就不演示了。没有动图很麻烦。】

简单总结：
如果checkbox绑定v-model是个数组。
这个数组的结果是选中的item。（item的值取决于value属性所绑定的值）
value属性和是否选中没有关系。

最后一个思考：
是不是无法用vue，用绑定checked的方式，给checked赋值？