<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="runcodex" value="Runcodex" v-model="checkedNames">

    <label for="runcodex">

        Runcodex

    </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>

new Vue({

    el: '#app',

    data: {

        checked: false,

        checkedNames: [],

        checkedArr: ["Runcodex", "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

            }

        }

    }

})