该实例实现复选框的全选与反全选。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<table>
<tr>
<th>
<!-- 这是全选复选框（即选中了这个复选框，所有选项复选框都被选中），其绑定数据的v-model为checkedAll，并绑定了改变事件changeAllChecked -->
<input type="checkbox" v-model="checkedAll" v-on:change="changeAllChecked()">
</th>
<th>序号</th>
</tr>
<tr>
<!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
<td><input type="checkbox" value="1" v-model="checkedItem" /></td>
<td>1</td>
</tr>
<tr>
<!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
<td><input type="checkbox" value="2" v-model="checkedItem" /></td>
<td>2</td>
</tr>
<tr>
<!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
<td><input type="checkbox" value="3" v-model="checkedItem" /></td>
<td>3</td>
</tr>
<tr>
<!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
<td><input type="checkbox" value="4" v-model="checkedItem" /></td>
<td>4</td>
</tr>
</table>
<!-- 打印选中的选项复选框的value属性的值 -->
<p>选中的值为：{{checkedItem}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
// 设置全选复选框初始状态为false,即未选中
checkedAll: false,
// 设置选项复选框初始状态为未选中,由于是一个数组,所以值为[],即为空
checkedItem: [],
// 设置选中全选复选框后重新给选项复选框赋值,即选中所有的选项复选框
checkedAttr: ["1", "2", "3", "4"]
},
methods: {
// 全选复选框状态改变监听事件
changeAllChecked: function() {
// 判断全选复选框是否选中
if (this.checkedAll) {
// 如果全选复选框被选中,则重新给选项复选框赋值,即选中所有的选项复选框
this.checkedItem = this.checkedAttr;
} else {
// 如果全选复未选框被选中,则设置为空值,即未选中所有的选项复选框
this.checkedItem = [];
}
}
},
watch: {
// 监听复选框项是否全部选中
checkedItem: function() {
// 判断选中选项复选框的值数组的长度是否与设定的长度相等，如果相等则所有的选项复选框被选中，否则没有被选中。
if (this.checkedItem.length == this.checkedAttr.length) {
// 如果所有复选框项全部被选中,则全选复选框也被勾选
this.checkedAll = true;
} else {
// 否则复选框不勾选
this.checkedAll = false;
}
}
}
});
</script>
</body>
</html>
浏览器显示：
