脚本宝典收集整理的这篇文章主要介绍了vue.js如何实现全选功能,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
vue.js实现全选功能的方法:使用普通的事件监听方式处理数据状态,例如【VAR list = [{tITle : '数据一',checked : false,},{title : '数据二',checked : },{title...】。
本文操作环境:windows10系统、vue.js 2.9、ThinkPad t480电脑。
在实际项目中我们可以使用如下两种方式来实现全选功能,具体如下:
方式一:完全发挥了 vuejs 的特性,使用了 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> 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; }); } } } });@H_512_16@方式二:使用普通的事件监听方式处理数据状态
<div id="app"> <div class="box"> <div class="title"><label> <input type="checkbox" v-model="status" @change="allCheck">全选</label></div> <ul> <li v-for="item,index of list"> <label><input type="checkbox" v-model="item.checked" @change="singleCheck">{{item.title}}</label></li> </ul> </div> </div> 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如何实现全选功能的详细内容,更多请关注脚本宝典其它相关文章!
脚本宝典总结
以上是脚本宝典为你收集整理的vue.js如何实现全选功能全部内容,希望文章能够帮你解决vue.js如何实现全选功能所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。