本文實例為大家分享了Vue在購物車場景下的應用，供大家參考，具體內(nèi)容如下
購物車場景需求：
1. 商品、店鋪、購物車的選擇
2. 商品刪除
關(guān)鍵代碼
測試數(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 }]}];店鋪對象組成購物車數(shù)組 _list
商品對象組成店鋪對象下的商品數(shù)組 goods
每個商品和店鋪都有自己的 checked 字段
一. 選擇商品
數(shù)據(jù)綁定
<body class="app"> <input type="checkbox" v-if="list.length" v-model="checkedAll"> <div v-for="(shopI, shop) in list" class="shop"> <input type="checkbox" v-model="shop.checked"> <div v-for="(goodI, good) in shop.goods" class="good"> <input type="checkbox" v-model="good.checked"> <span v-html="good.name"></span> <span v-html="good.age"></span> </div> </div></body>
var vue = new Vue({ el: '.app', data: { list: _list }});監(jiān)聽購物車全選
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; }}當?shù)赇佭x擇數(shù)（checkedShopsCount）等于店鋪數(shù)（list.length）時，購物車全選（checkedAll）為 true
商品 & 店鋪選擇事件
<input type="checkbox" v-if="list.length" v-model="checkedAll" @change="setAllChecked($event)"><div v-for="(shopI, shop) in list"> <input type="checkbox" v-model="shop.checked" @change="setGoodChecked(shop)"> <div v-for="(goodI, good) in shop.goods"> <input type="checkbox" v-model="good.checked" @change="setShopChecked(good, shop)"> <span v-html="good.name"></span> <span v-html="good.age"></span> </div></div>
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; }); } }}選擇購物車時執(zhí)行 setAllChecked，此時選擇所有商品和店鋪
選擇店鋪時執(zhí)行 setGoodChecked，此時選擇該店鋪下所有商品
選擇商品時執(zhí)行 setShopChecked
當商品 checked 為 false 時，取消選擇當前店鋪
當商品 checked 為 true 時，判斷當前店鋪是否選擇了所有商品，是則選擇當前店鋪，否則取消選擇當前店鋪
二、刪除商品
<input type="button" value="刪除" @click="deleteGood(shop,goodI,list,shopI)">
methods: { deleteGood: function(shop,goodI,list,shopI) { shop.goods.splice(goodI, 1); if (shop.goods.length==0) { list.splice(shopI, 1); } }}全部代碼
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我的購物車</title><script src="vue.min.js"></script></head><body class="app"><input type="checkbox" v-if="list.length" v-model="checkedAll" @change="setAllChecked($event)"><div v-for="(shopI, shop) in list"><input type="checkbox" v-model="shop.checked" @change="setGoodChecked(shop)"><div v-for="(goodI, good) in shop.goods"><input type="checkbox" v-model="good.checked" @change="setShopChecked(good, shop)"><span v-html="good.name"></span><span v-html="good.age"></span><input type="button" value="刪除" @click="deleteGood(shop,goodI,list,shopI)"></div></div></body><script>var _list = [{checked: false,goods: [{name: "商品1",money: 23,checked: false}]}, {checked: false,goods: [{name: "商品2",money: 20,checked: false}, {name: "商品3",money: 30,checked: false}]}];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;}},methods: {setGoodChecked: function(shop) {shop.goods.forEach(function(good) {good.checked = shop.checked;});},setShopChecked: function(good, shop) {if (!good.checked) {shop.checked = false;} else {shop.checked = !shop.goods.find(function(good) {return !good.checked;});}},setAllChecked: function(e) {this.list.forEach(function(shop) {shop.checked = e.target.checked;shop.goods.forEach(function(good) {good.checked = e.target.checked;});});},deleteGood: function(shop, goodI, list, shopI) {shop.goods.splice(goodI, 1);if (shop.goods.length == 0) {list.splice(shopI, 1);}}}});</script></html>以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
