微客导航 » 文章资讯 » Vue实现购物车场景下的应用

Vue实现购物车场景下的应用

2023-09-20 10:47:04 280

本文实例为大家分享了Vue在购物车场景下的应用，供大家参考，具体内容如下

购物车场景需求：

1.商品、店铺、购物车的选择

2.商品删除

关键代码

测试数据

var_list=[{
checked:false,
goods:[{
name:"商品1",
price:23,
checked:false
}]
},{
checked:false,
goods:[{
name:"商品2",
price:20,
checked:false
},{
name:"商品3",
price:30,
checked:false
}]
}];

店铺对象组成购物车数组_list
商品对象组成店铺对象下的商品数组goods
每个商品和店铺都有自己的checked字段

一.选择商品

选择商品
选择店铺下的所有商品
选择购物车里的所有商品

数据绑定

varvue=newVue({
el:'.app',
data:{
list:_list
}
});

监听购物车全选

computed:{
checkedAll:function(){
returnthis.checkedShopsCount==this.list.length;
},
checkedShopsCount:function(){
vari=0;
this.list.forEach(function(item){
if(item.checked==true)i++;
});
returni;
}
}

当店铺选择数（checkedShopsCount）等于店铺数（list.length）时，购物车全选（checkedAll）为true
商品&店铺选择事件

methods:{
setAllChecked:function(e){
this.list.forEach(function(shop){
shop.checked=e.target.checked;
shop.goods.forEach(function(good){
good.checked=e.target.checked;
});
});
},
setGoodChecked:function(shop){
shop.goods.forEach(function(good){
good.checked=shop.checked;
});
},
setShopChecked:function(good,shop){
if(!good.checked){
shop.checked=false;
}else{
//检查店铺是否存在checked为false的商品
shop.checked=!shop.goods.find(function(good){
return!good.checked;
});
}
}
}

选择购物车时执行setAllChecked，此时选择所有商品和店铺
选择店铺时执行setGoodChecked，此时选择该店铺下所有商品
选择商品时执行setShopChecked
当商品checked为false时，取消选择当前店铺
当商品checked为true时，判断当前店铺是否选择了所有商品，是则选择当前店铺，否则取消选择当前店铺

二、删除商品

methods:{
deleteGood:function(shop,goodI,list,shopI){
shop.goods.splice(goodI,1);
if(shop.goods.length==0){
list.splice(shopI,1);
}
}
}

全部代码





我的购物车

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Vue实现购物车场景下的应用

热门推荐

随机推荐