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的長度相同。若是長度相同就說明全選了，