vue全选反选

一、把数据渲染到页面

<li v-for="item in arr" :key="item.id">
  <input type="checkbox" v-model="item.c"/>
  <span>{{item.name}}</span>
</li>

  data() {
    return {
      arr: [
        {
          id:1,
          name: "猪八戒",
          c: false,
        },
        {
          id:2,
          name: "孙悟空",
          c: false,
        },
        {
          id:3,
          name: "唐僧",
          c: false,
        },
        {
          id:4,
          name: "白龙马",
          c: false,
        },
      ],
    };
  },

二、当数据在父组件 并在父组件改变

小选框加入这个值

v-model="item.checked"/

全选框加入这个值

v-model="isAll"

函数写在computed里面

    isAll:{
      get(){
        return this.arr.every(v=>v.c)//v.c是v.c===true的简写
      },
      set(val){
        this.arr.forEach(v=>{v.c=val})
      }
    }

三、当数据在父组件 子组件里使用、改变值

在子组件的小选框中将v-model="item.checked"改成以下内容

:checked="item.done"
@change="iptChange(item.id)"

添加方法 把对应的id传给父组件

  methods: {
    iptChange(id) {
      this.$emit('on-iptChange',id)
    },
  },

父组件接收方法

@on-iptChange='iptChangeFn'

父组件书写对应方法

    iptChangeFn(id){
      let todo=this.list.find(v=>v.id==id)
      todo.done=!todo.done
    }