HTML代码：
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
<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>
</div>
Vue代码：
new Vue({ el: ‘#app‘, data: { 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 } } } })
代码的引用的地址是：https://c.runoob.com/codedemo/3870 里面有效果
这一段代码里面最难理解的就是为什么会全选上，这主要是因为checkedArr里面预先定义了有上面复选框里面的值，如果checked为true的时候，把checkedArr的值给了checkedNames了，然后上面复选框和CheckedNames是绑定的关系，当数据里面的值和上面复选框里面的value里面的值有一个相同的时候，自动就选中了。 如果不相信的话可以去改一下上面复选框里面的value的值，只要不是和下面数组里面的对应，就不会选中。
下面的watch的作用就要是监听数据的：在这里用的是监听checkedNames的值改的时候和不和checked的长度相同。如果长度相同就说明全选了，
原文：https://www.cnblogs.com/xdtg/p/11902117.html