Vue全选和全不选

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的长度相同。若是长度相同就说明全选了，