Vue实现购物车场景下的应用


Posted in Javascript onNovember 27, 2017

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
代码详解JS操作剪贴板
Feb 11 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 #Javascript
vue购物车插件编写代码
Nov 27 #Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 #Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 #Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 #Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 #Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 #Javascript
You might like
PHP生成便于打印的网页
2006/10/09 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
php实现socket推送技术的示例
2017/12/20 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
javascript工具库代码
2012/03/29 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
js实现随机点名小功能
2017/08/17 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python下Fabric的简单部署方法
2015/07/14 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python实现微信自动回复机器人功能
2019/07/11 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
应届生财务管理求职信
2013/11/06 职场文书
大学自荐信
2013/12/12 职场文书
企业为何需要商业计划书
2013/12/26 职场文书
税务会计岗位职责
2014/02/18 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
六年级学生评语大全
2014/12/26 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS