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 相关文章推荐
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
浅谈vue的第一个commit分析
Jun 08 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+mysql实现用户注册登陆的方法
2015/01/03 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
Hotels.com印度:酒店预订
2019/05/11 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
什么是TCP/IP
2014/07/27 面试题
营业员实习自我鉴定
2013/12/07 职场文书
请假条怎么写
2014/04/10 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
工商管理专业自荐信
2014/06/03 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
iPhone13再次曝光
2021/04/15 数码科技
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫