大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

vue.js怎么实现全选功能

这篇文章将为大家详细讲解有关vue.js怎么实现全选功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联公司-专业网站定制、快速模板网站建设、高性价比邵阳网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式邵阳网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖邵阳地区。费用合理售后完善,十载实体公司更值得信赖。

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

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

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

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


    
        
            
        
        
                                      
    
  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;                 });             }         }     } });

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


    
        
              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数据状态后滞后。

关于“vue.js怎么实现全选功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


当前名称:vue.js怎么实现全选功能
网址分享:http://dzwzjz.com/article/pgjpsi.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP