Vue 移动端购物车页全选反选简单实现及判断
data(){
return{
goodlist:[],//与后台交互获取的当前用户购物车商品列表
checkedNames:[],//选中的商品
}
},
computed:{/
isall:function(){ //添加一个计算属性,判断选中列表的length是否和data的length相等,如果相等,这个计算属性的值设置为true,反之设置为false
if(this.checkedNames.length > 0 && this.checkedNames.length === this.goodlist.length){
return true
}
else{
return false
}
}
}
checkbox的v-model绑定checkedNames;
全选事件:
checkAll:function(){ //全选按钮
if(this.checkedNames.length >=0 && this.isall == false){
let length = this.goodlist.length;
let checkAllgood = []
for(let i = 0;i
checkAllgood.push(i)
}
this.checkedNames = checkAllgood
// this.isall = true
}
else if(this.isall == true){
// this.isall = false
this.checkedNames.splice(0,this.checkedNames.length)
}
}



网友评论