vuejs实现全选功能

时间：2023-04-05 23:57:05 HTML5

全选功能开发说明本项目使用vuejs实现项目提供了两种实现全选功能的方法，并附上源码，共参考方法一种方式，充分发挥vuejs的特点，使用computed实现启用了单选按钮的实时监控。全选

varlist=[{title:'数据一',checked:false,},{title:'数据二',checked:true,},{title:'数据三',checked:true,},{title:'数据四',checked:true,},{title:'数据五',checked:true,}];varvm=newVue({el:'#app',data:{list},computed:{status:{get(){returnthis.list.filter(item=>item.checked).length===this.list.length},set(值){this.list.map(function(item){item.checked=value;returnitem;});}}}});方法二方法二使用普通事件监听处理数据状态

全选

varlist=[{title:'Data1',checked:false,},{title:'Data2',checked:true,},{title:'数据三',checked:true,},{title:'数据四',checked:true,},{title:'数据五',checked:true,}];varvm=newVue({el:'#app',data:{list,status:this.list.filter(item=>item.checked).length===this.list.length?true:false},方法：{allCheck(){this.list.map(function(item){item.checked=this.status;returnitem;}.bind(this));},singleCheck(){this.status=this.list.filter(item=>item.checked).length===this.list.length?true:false}}});表示方法二中使用了事件监听函数，使用了change，也可以使用click，在使用click事件时，vuejs低版本有bug，高版本修复了bug，该bug存在于双向绑定状态变化时使用点击数据状态后的滞后

上一篇：vue中手机号、邮箱定时验证和60s发送验证码

下一篇：ios-Androidh5唤起本地APP

vuejs实现全选功能相关文章