您好,登录后才能下订单哦!
本文实例为大家分享了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,此时选择所有商品和店铺
选择店铺时执行 setGoodChecked,此时选择该店铺下所有商品
选择商品时执行 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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。