vue实现全选、反选功能

<templata>
  <div>
    <div>
        <span>全选</span>
        <input type = "checkbox" v-model = 'checkAll'>
    </div>
    <ul>
        <li v-for = 'item in state'>
           <input type = 'checkbox' v-model = 'item.isCheck'
           <span>{{item.name}}</span>
        </li>
      </ul>
  </div>
</templata>

<script setup>
import {computed,reactive} from 'vue'
    
const state = reactive([
    {name:'zhangsan',isCheck:true},
    {name:"lisi",isCheck:false},
    {name:'wangwu',isCheck:false}
])

//上面的全选是依赖于下面几个数据是勾选的
const checkAll = computed({
    get(){
        // Array.prototype.every作用是检查数组里面的每一个元素是否满足条件
        return state.every(item => item.isCheck)
    },
    set(value){
        state.forEach(item => item.isCheck = value)
    }
   
})
</script>