1. <template>
    2. <div class="box">
    3.   <input type="checkbox" v-model="checkAll">
    4.   <ul>
    5.     <li v-for="(item,index) in list" :key="index">
    6.       <input type="checkbox" v-model="checkList[index]">{{item}}
    7.     </li>
    8.   </ul>
    9. </div>
    10. </template>
    12. <script setup lang="ts">
    13. import { toRefs, reactive, computed } from "vue";
    14. const data = reactive({
    15.   list:[10,20,30,40],
    16.   checkList:[false,false,false,false]
    17. })
    18. let {list,checkList} = toRefs(data)
    19. const checkAll = computed({
    20.   get() {
    21.     return !data.checkList.includes(false)
    22.   },
    23.   set(newVal:boolean) {
    24.     data.checkList = data.checkList.map(() => newVal)
    25.   }
    26. })
    27. </script>