简单的全选反选

1.在计算属性computed中写一个方法，第一步在set方法中便利数组，让每一项的控制全选反选的关键字都赋值为val

2.在get方法中输出筛选选中的数组长度等于总数组的长度

data() {
    return {
      str: [
        {
          checkout: false,
          text: '1'
        },
        {
          checkout: false,
          text: '1'
        },
        {
          checkout: false,
          text: '1'
        },
        {
          checkout: false,
          text: '1'
        },
      ]
    }
  },
computed:{
    flag:{
      set(val){
        this.str.forEach(item=>item.checkout=val)
      },
      get(){
       return this.str.filter(item=>item.checkout).length == this.str.length
      }
    }
  },
 
}

3。页面结构也给了，不谢。其实就是计算属性绑定给全选框，数组中的关键字双向绑定给复选框。

<div class="check">
          <input type="checkbox" v-model="flag">
          <p v-for="(item, key) in str" :key="key">
            <input type="checkbox" v-model="item.checkout">
            <span>{{ item.text }}</span>
          </p>
        </div>

还有好多种方法能实现全选反选，但是对于不会写的宝子们，肯定迫切的想知道一种简单易懂的，所以就先写这一种，后面我会陆续分享一些前端的知识，希望能够帮助到一些同胞，有大神发现问题也欢迎多多指教