vue如何利用computed实现全选功能

vue如何利用computed监控实现全选功能，下面编程教程网小编给大家详细介绍一下实现代码！

实现代码如下：

<div id="app">
  <div class="box">
    <div class="title">
      <label><input type="checkbox" v-model="status">全选</label>
    </div>
    <ul>
      <li v-for="item,index of list"><label>
        <input type="checkbox" v-model="item.checked">{{item.title}}</label>
      </li>
    </ul>
  </div>
</div>

list数据：

var list = [
  {
    title : '数据一',
    checked : false,
  },{
    title : '数据二',
    checked : true,
  },{
    title : '数据三',
    checked : true,
  },{
    title : '数据四',
    checked : true,
  },{
    title : '数据五',
    checked : true,
}];

执行方法：

var vm = new Vue({
  el : '#app',
  data:{
      list
  },
  computed:{
    status:{
      get(){
        return this.list.filter( item => item.checked ).length === this.list.length
      },
      set( value ){
        this.list.map(function( item ){
          item.checked = value;
          return item;
        });
      }
    }
  }
});

以上是编程学习网小编为您介绍的“vue如何利用computed实现全选功能”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。