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 字段

一. 选择商品

选择商品 选择店铺下的所有商品 选择购物车里的所有商品

input type="checkbox" v-if="list.length" v-model="checkedAll" div v-for="(shopI, shop) in list" input type="checkbox" v-model="shop.checked" div v-for="(goodI, good) in shop.goods" input type="checkbox" v-model="good.checked" span v-html="good.name" /span span v-html="good.age" /span /div /div /body

当店铺选择数（checkedSho凡科抠图Count）等于店铺数（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 

// 检查店铺是否存在 checked 为 false 的商品 shop.checked = !shop.goods.find(function(good) { return !good.checked;

选择购物车时执行 setAllChecked，此时选择所有商品和店铺
选择店铺时执行 setGoodChecked，此时选择该店铺下所有商品
选择商品时执行 setShopChecked
  当商品 checked 为 false 时，取消选择当前店铺
  当商品 checked 为 true 时，判断当前店铺是否选择了所有商品，是则选择当前店铺，否则取消选择当前店铺

二、删除商品

 input type="button" value="删除" @click="deleteGood(shop,goodI,list,shopI)" 

body 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.checkedSho凡科抠图Count == this.list.length; checkedSho凡科抠图Count: 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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。