FE-DSHUI / DSHUI

前端王者小分队读书会
4 stars 1 forks source link

《vue2中computed属性get set应用案例——全选checkbox的控制》 #96

Open isbaselvy opened 2 years ago

isbaselvy commented 2 years ago

<div>
  全选<input type="checkbox" v-model="allDone">
  <span> {{active}}  / {{all}} </span>
</div>

<script>
computed:{
  active(){
    return this.todos.filter(v=>!v.done).length
  },
  all(){
    return this.todos.length
  },
  allDone: {
      get: function () {
        return this.active === 0
      },
      set: function (val) {
        this.todos.forEach(todo=>{
          todo.done = val
        });
      }
  }
}
</script>