Web开发：Vue中的事件小结

一、全选按钮checkbox

<template><div id="checkboxs"><label><input id="selectAll" type="checkbox" v-model="selectAllChecked" @change="selectAllItems">全部</label><label v-for="(item, index) in options" :key="index"><input type="checkbox" v-model="checkedItems" :value="item">{{ item }}</label></div>
</template><script>
export default {data() {return {selectAllChecked: false, // 是否全选checkedItems: [], // 已选中的项options: [ // 可选项'A','B','C','D']};},methods: {selectAllItems() {if (this.selectAllChecked) {// 如果全选复选框被选中，则将所有选项都加入到 checkedItems 数组中this.checkedItems = [...this.options];} else {// 否则清空 checkedItems 数组this.checkedItems = [];}}},watch: {// 监听 checkedItems 数组的变化checkedItems: function(newVal) {// 根据已选中的数量来判断是否要勾选全选复选框this.selectAllChecked = newVal.length === this.options.length;}}
};
</script>

总结一下：

1.v-model具有双向绑定数据的功能

例如：

<input id="selectAll" type="checkbox" v-model="selectAllChecked" @change="selectAllItems">
this.selectAllChecked = 1

可以使得该按钮被选中

再例如：

<label v-for="(item, index) in options" :key="index"><input type="checkbox" v-model="checkedItems" :value="item">{{ item }}</label>
this.checkedItems = [...this.options]

[...this.options]的内容（例如为['A','B']），通过赋值给this.checkedItems可以使得A和B两个选项被选中。

2.watch可以监控v-model对应的控件的状态变化情况

例如：

watch: {// 监听 checkedItems 数组的变化checkedItems: function(newVal) {// 根据已选中的数量来判断是否要勾选全选复选框this.selectAllChecked = newVal.length === this.options.length;}

可以监听v-model为 checkedItems的控件的状态

3.@change是监听器，可以监听空间的变化，从而调用指定的方法

二、动态id

<label v-for="(item, index) in options" :key="index"><input type="checkbox" v-model="checkedItems" :value="item" :id="ki(index)">{{ item }}
</label>

methods: {ki: function (i) {return 'checkbox' + i}
}

• input标签的value：就是options数组遍历的值
• input标签的id：就是checkbox0 checkbox1.....  （通过ki方法实现）