1、頁面結構部分

<template>
    <div>
        <!--給全選按鈕繫結v-mode變數，值為true時就是選中狀態，繫結點選事件，執行全選和反選操作-->
        <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'>全選
        <div v-for='checkb in checkboxData' :key="checkb.id">
            <!--給每個複選按鈕繫結同一個v-mode陣列變數，數組裡面有相應的value就被選中-->
 

            <input type='checkbox' name='checkboxinput' class='input-checkbox' v-model='checkboxList' :value="checkb.id">{{checkb.value}}
        </div>
    </div>
</template>

2、JS部分

<script>
export default {
    methods:{
        checkedAll: function() {
            if
 
 (this.checked) {//實現反選
                this.checkboxList = [];
            } else { //實現全選
                this.checkboxList = [];
                this.checkboxData.forEach( (item) => {
                    this.checkboxList.push(item.id);
                });
            }
        }
    },
    watch: { //深度 watcher
 

        checkboxList: {
            handler: function (val, oldVal) { 
                if (this.checkboxList.length === this.checkboxData.length) {
                    this.checked=true;
                } else {
                    this.checked=false;
                }
            },
            deep: true
        }
    },
    data () {
        return {
            checkboxData:[{
                id:'1',
                value:'蘋果'
            },{
                id:'2',
                value:'荔枝'
            },{
                id:'3',
                value:'香蕉'
            },{
                id:'4',
                value:'火龍果'
            }],
            checkboxList:[],
            checked: false
        }
    }
};
</script>