本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍vue实现购物车选择功能,包括了vue实现购物车选择功能的使用技巧和注意事项,需要的朋友参考一下 使用vue制作一个购物车功能,只是一个测试版本,注重的是功能实现,界面并没有做好,数据也是模拟数据等 不说那么多,直接上代码 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍php实现购物车功能(下),包括了php实现购物车功能(下)的使用技巧和注意事项,需要的朋友参考一下 接着上篇继续学习: 《php实现购物车的功能(上)》 7、实现一个管理界面 登录界面 由以下代码实现: 7.1 admin.php 7.2 user_auth_fns.php文件中的函数login() 7.3 user_auth_fns.php文件中的函数check_admin_us
本文向大家介绍用vue和node写的简易购物车实现,包括了用vue和node写的简易购物车实现的使用技巧和注意事项,需要的朋友参考一下 项目介绍 这是用vue写前端,用node来接收前端发来的请求,然后进行相应的数据操作,例如数据的存取和删除等。这是个人的练习项目,目前功能做的比较简单,主要是展示商品列表,把商品加入购物车,从购物车删除商品三个小功能。 搭建本地环境 因为是用vue,需要用babe
本文向大家介绍Python实现购物车购物小程序,包括了Python实现购物车购物小程序的使用技巧和注意事项,需要的朋友参考一下 概要 按理说,我们入门的第一个小程序都应该是Hello World。因为比较简单,我这也就不做过多的演示 了。 下面是我写的一个小程序。主要用于练习Python的基本语法,以及入门。 主要实现功能 要求用户输入自己预期消费额度. 展示现有商品信息,要求用户选择 用户选择对
本文向大家介绍Vue实现购物车详情页面的方法,包括了Vue实现购物车详情页面的方法的使用技巧和注意事项,需要的朋友参考一下 上次我们为商品分类菜单添加了显示购物数量,这篇我们继续推进项目,来实现购物车的详情页面,在开始之前我们先看它在页面中的样子: 如上所示,此页面包含了购物列表,而它由商品名称,单价,增减商品功能构成,增减商品功能我们在商品列表中实现过,那么我们现在可以进行复用。 搭出购物车
本文向大家介绍PHP实现的购物车类实例,包括了PHP实现的购物车类实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了PHP实现的购物车类。分享给大家供大家参考。具体分析如下: 该购物车类是基于CodeIgniter的购物车类仿写实现的。 购物车基本功能如下: 1) 将物品加入购物车 2) 从购物车中删除物品 3) 更新购物车物品信息 【+1/-1】 4) 对购物车物品进行统计 1.
本文向大家介绍vue实现的仿淘宝购物车功能详解,包括了vue实现的仿淘宝购物车功能详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了vue实现的仿淘宝购物车功能。分享给大家供大家参考,具体如下: 下面是一张众所周知的淘宝购物车页面,今天要讲解的案例就是用vue.js做一个类似的页面 首先简单介绍一下可能会用到的一些vue.js的用法: v-bind,绑定属性;例如v-bind:class
本文向大家介绍JS实现购物车特效,包括了JS实现购物车特效的使用技巧和注意事项,需要的朋友参考一下 效果: 1.点击全选按钮可以全选,再点击就全不选 2.点击数量 ‘ + ' ‘ - ' 可以自动计算。并且合计保持更新。当数量大于1时‘ - '出现。小于等于1时‘ - '消失 3.点击删除可以实现删除功能。 4.点击全选旁的删除按钮可以全部删除。 5.选好商品后点击已选商品,可以显示选中的商品