vue实现全选功能

<template>  <div>    <span>全选:</span>    <input type="checkbox" v-model="isAll" />    <button @click="btn">反选</button>    <ul>      <li v-for="(obj, index) in arr" :key="index">        <input type="checkbox" v-model="obj.c" />        <span>{{ obj.name }}</span>      </li>    </ul>  </div></template> <script>export default {  data() {    return {      arr: [        {          name: "猪八戒",          c: false,        },        {          name: "孙悟空",          c: false,        },        {          name: "唐僧",          c: false,        },        {          name: "白龙马",          c: false,        },      ],    };  },  computed: {    isAll: {      //全选影响小选      set(val) {        //set(val) 设置全选的状态(true/ false)        //我们手动设置了全选框的状态,就遍历数组里的每个对象的c属性, 也就是遍历看每个小选框的状态,让它的状态改为 val 全选框的状态        this.arr.forEach((obj) => (obj.c = val));      },      //小选框影响全选框      get() {        //判断数组里的每一个对象的c属性 它是不是等于true, 就是判断每一个小选框的状态, 只要有一个小选框的状态不为true 就是没有被勾上, 那就返回false , 全选框的状态就是false        // every口诀: 查找数组里"不符合"条件, 直接原地返回false        return this.arr.every((obj) => obj.c === true);      },    },  },  methods: {    btn() {      //实现反选      //遍历数组里的每一项,  让数组里对象的c属性取反再赋值回去      this.arr.forEach((obj) => (obj.c = !obj.c));    },  },};</script>