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

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

本文实例为大家分享了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 字段

一. 选择商品

选择商品

选择店铺下的所有商品

选择购物车里的所有商品

数据绑定

var vue = new Vue({

el: '.app',

data: {

list: _list

}

});

监听购物车全选

computed: {

checkedAll: function() {

return this.checkedShopsCount == this.list.length;

},

checkedShopsCount: function() {

var i = 0;

this.list.forEach(function(item) {

if (item.checked == true) i++;

});

return i;

}

}

当店铺选择数（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 {

MloClEar // 检查店铺是否存在 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);

}

}

}

全部代码

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。