vue全选和取消全选的实现方式（主要是理解computed中的set和get）

效果：

　　

 

一、通过watch监听和methods进行数据交互

　　DOM结构：

<template>
  <div id="app">
    <ul>
      <li><input type="checkbox" v-model="allCheck" @click="handleAllCheck" />全选</li><br />
      <li v-for="item in list" :key="item.id">
        <input type="checkbox" v-model="item.status" />{{item.xueli}}
      </li><br />
    </ul>
  </div>
</template>

　　data：

  data() {
    return {
      list: [
        { id: 1, xueli: '小学', status: true },
        { id: 2, xueli: '初中', status: false },
        { id: 3, xueli: '高中', status: true },
        { id: 4, xueli: '大学', status: true }
      ],
      allCheck: null
    }
  }

　　watch+methods：

  watch: {
    list: {
      handler(newList) {
        this.allCheck = newList.every((item) => item.status === true)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleAllCheck() {
      this.list.forEach((item) => {
        item.status = !this.allCheck
      })
    }
  }

 

二、通过computed进行数据交互

　　DOM（全选按钮不需要点击事件）：

<template>
  <div id="app">
    <ul>
      <li><input type="checkbox" v-model="allCheck" />全选</li><br />
      <li v-for="item in list" :key="item.id">
        <input type="checkbox" v-model="item.status" />{{item.xueli}}
      </li><br />
    </ul>
  </div>
</template>

　　data中不需要定义allCheck变量，使用的是computed中定义的allCheck：

  computed: {
    allCheck: {
      get () {
        const arr = this.list.filter((item) => !item.status)
        if (arr.length === 0) return true
　　　　　// return this.list.every(item => item.status)

      },
      set (value) {
        this.list.forEach(function (item) {
          item.status = value
        })
      }
    }
  }