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

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

实现代码如下：

复制代码<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>
1
2
3
4
5
6
7
8
9
10
11
12

list数据：

复制代码var list = [
  {
    title : '数据一',
    checked : false,
  },{
    title : '数据二',
    checked : true,
  },{
    title : '数据三',
    checked : true,
  },{
    title : '数据四',
    checked : true,
  },{
    title : '数据五',
    checked : true,
}];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

执行方法：

复制代码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;
        });
      }
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

利用纯js实现表格全选功能

el-checkbox点击全选后再点击单选功能错乱解决方法

标签： computed, 全选

上面是“vue如何利用computed实现全选功能”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3048.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！