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怎么实现全选功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
