本文實(shí)例為大家分享了Vue在購(gòu)物車(chē)場(chǎng)景下的應(yīng)用，供大家參考，具體內(nèi)容如下
通河網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司2013年至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。
購(gòu)物車(chē)場(chǎng)景需求：
1. 商品、店鋪、購(gòu)物車(chē)的選擇
2. 商品刪除
關(guān)鍵代碼
測(cè)試數(shù)據(jù)
重慶分公司
重慶分公司
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
}]
}];
店鋪對(duì)象組成購(gòu)物車(chē)數(shù)組 _list
商品對(duì)象組成店鋪對(duì)象下的商品數(shù)組 goods
每個(gè)商品和店鋪都有自己的 checked 字段
一. 選擇商品
數(shù)據(jù)綁定
var vue = new Vue({
el: '.app',
data: {
list: _list
}
});
監(jiān)聽(tīng)購(gòu)物車(chē)全選
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;
}
}
當(dāng)?shù)赇佭x擇數(shù)（checkedShopsCount）等于店鋪數(shù)（list.length）時(shí)，購(gòu)物車(chē)全選（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;
});
}
}
}
選擇購(gòu)物車(chē)時(shí)執(zhí)行 setAllChecked，此時(shí)選擇所有商品和店鋪
選擇店鋪時(shí)執(zhí)行 setGoodChecked，此時(shí)選擇該店鋪下所有商品
選擇商品時(shí)執(zhí)行 setShopChecked
當(dāng)商品 checked 為 false 時(shí)，取消選擇當(dāng)前店鋪
當(dāng)商品 checked 為 true 時(shí)，判斷當(dāng)前店鋪是否選擇了所有商品，是則選擇當(dāng)前店鋪，否則取消選擇當(dāng)前店鋪
二、刪除商品
methods: {
deleteGood: function(shop,goodI,list,shopI) {
shop.goods.splice(goodI, 1);
if (shop.goods.length==0) {
list.splice(shopI, 1);
}
}
}
全部代碼
我的購(gòu)物車(chē)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
