vue.js如何实现全选功能

vue.js实现全选功能的方法：使用普通的事件监听方式处理数据状态，例如【var list = [{title : ‘数据一’,checked : false,},{title : ‘数据二’,checked : },{title…】。

本文操作环境：windows10系统、vue.js 2.9、thinkpad t480电脑。

在实际项目中我们可以使用如下两种方式来实现全选功能，具体如下：

方式一：完全发挥了 vuejs 的特性，使用了 computed 实现了对 单选按钮的实时监控。

    
        
            全选        
        
            
                {{item.title}}            
        
    
 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;                });            }        }    }});

登录后复制

方式二：使用普通的事件监听方式处理数据状态

立即学习“前端免费学习笔记（深入）”；

    
        
        全选
        
            
                {{item.title}}
        
    
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,        status : this.list.filter( item => item.checked ).length === this.list.length ? true : false    },    methods : {        allCheck(){            this.list.map(function( item ){                item.checked = this.status;                return item;            }.bind(this));        },        singleCheck(){            this.status = this.list.filter( item => item.checked ).length === this.list.length ? true : false        }    }});

登录后复制

说明在方式二中使用了事件监听函数，使用了change，也可以使用 click，使用click事件时，低版本的vuejs存在 bug，高版本中 bug 修复，bug 存在于，在双向绑定状态改变时 使用click数据状态后滞后。

推荐学习：php培训

以上就是vue.js如何实现全选功能的详细内容，更多请关注【创想鸟】其它相关文章！