Vue實(shí)現(xiàn)購物車場(chǎng)景下的應(yīng)用

更新時(shí)間：2017年11月27日 11:06:47 作者：Henry2509885

這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)購物車場(chǎng)景下的應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue在購物車場(chǎng)景下的應(yīng)用，供大家參考，具體內(nèi)容如下

購物車場(chǎng)景需求：

1. 商品、店鋪、購物車的選擇

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ì)象組成購物車數(shù)組 _list
商品對(duì)象組成店鋪對(duì)象下的商品數(shù)組 goods
每個(gè)商品和店鋪都有自己的 checked 字段

一. 選擇商品

選擇商品
選擇店鋪下的所有商品
選擇購物車?yán)锏乃猩唐?br />

數(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;
 }
}

當(dāng)?shù)赇佭x擇數(shù)（checkedShopsCount）等于店鋪數(shù)（list.length）時(shí)，購物車全選（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;
   });
  }
 }
}

選擇購物車時(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)前店鋪

二、刪除商品

<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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: