本文實例為大家分享了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 字段
一. 選擇商品
選擇商品 選擇店鋪下的所有商品 選擇購物車里的所有商品數據綁定
<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 }});監聽購物車全選
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
商品 & 店鋪選擇事件
<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; }); } }}選擇購物車時執行 setAllChecked，此時選擇所有商品和店鋪
新聞熱點
疑難解答
圖片精選
