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