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 相关文章推荐
javascript的函数
Jan 31 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 Javascript
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递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python中的进程分支fork和exec详解
2015/04/11 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python yield 使用浅析
2015/05/28 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
Python实现的读写json文件功能示例
2018/06/05 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
机关搬迁方案
2014/05/18 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
科技活动总结范文
2015/05/11 职场文书
2016年父亲节寄语
2015/12/04 职场文书
PO模式在selenium自动化测试框架的优势
2022/03/20 Python