Vue.js实现开发购物车功能的方法详解


Posted in Javascript onFebruary 22, 2019

本文实例讲述了Vue.js实现开发购物车功能的方法。分享给大家供大家参考,具体如下:

购物车一般包含商品名称、单价、数量等信息,数量可以任意新增或减少,商品项也可删除,还可以支持全选或多选:

Vue.js实现开发购物车功能的方法详解

我们把这个小项目分为三个文件:

  • index.html (页面)
  • index.js (Vue 脚本)
  • style.css (样式)

1 index.js

首先在 js 中初始化 Vue 实例,整体模板如下:

var app = new Vue({
 el: '#app',
 data: {
  ...
 },
 mounted: function () {
  ...
 },
 computed: {
  ...
 },
 methods: {
  ...
 }
});

一般来说,这里的 data 来源于服务端数据,这里为了简便,所以直接定义好的数据:

data: {
  /**
   * 购物车中的商品列表
   */
  list: [
   {
    id: 1,
    name: '韩国进口海牌海苔',
    price: 39.9,
    count: 1
   },
   {
    id: 2,
    name: '印尼进口 Nabati 丽巧克(Richoco)休闲零食 巧克力味 威化饼干',
    price: 11.8,
    count: 1
   },
   {
    id: 3,
    name: '菲律宾进口 道吉草 奶油夹',
    price: 6.5,
    count: 1
   }
  ],
  //选中的商品列表,用于计算总价
  checkList: []
 }

list 用于展示 购物车中的商品列表。

checkList 用于表示勾选中的商品列表,后面,我们会利用它来计算选中商品的总价。

mounted: function () {
  //默认全选
  this.checkAll();
  this.checkAllElement(document.querySelector(".checkAll"));
}

当 mounted 时,默认全选购物车内的所有商品。

computed: {
 /**
 * 总价
 * @returns {string}
 */
 totalPrice: function () {
 var total = 0;
 for (var i = 0; i < this.checkList.length; i++) {
 var item = this.checkList[i];
 total += item.price * item.count;
 }
 return total.toLocaleString();
 }
}

在计算属性中,我们定义了总价的计算方式,它会绑定勾选的 checkList 来计算总价。之所以使用 toLocaleString 方法,是因为小数部分会自动四舍五入,而且还会以千分位表示出来,很方便哦O(∩_∩)O~

methods: {
 /**
 * 减少购买数量
 * @param index
 */
 reduceCount: function (index) {
 if (this.list[index].count === 1) return;
 this.list[index].count--;
 },
 /**
 * 增加购买数量
 * @param index
 */
 addCount: function (index) {
 this.list[index].count++;
 },
 /**
 * 移除商品
 * @param index
 */
 remove: function (index) {
 console.log("remove-index:" + index);
 this.list.splice(index, 1);
 //获取商品序号
 var id = index + 1;
    //移除实际参与计算的商品
 var $checkList = this.checkList;
 for (var i = 0; i < $checkList.length; i++) {
 var item = $checkList[i];
 if (item.id == id) {
 $checkList.splice(i, 1);
 }
 }
 },
 /**
 * 全选或全不选
 * @param event
 */
 checkAllOrNot: function (event) {
 if (event.target.checked) {//全选
 this.checkAll();
 console.log("checkList:" + this.checkList);
 } else { // 全不选
 console.log("全不选");
 this.checkInItems('noCheckAll');
 this.checkList.splice(0);//清空数组
 }
 },
 /**
 * 全选
 */
 checkAll: function () {
 console.log("全选");
 this.checkInItems('checkAll');
 this.checkList = this.list.concat();//复制商品列表
 },
 /**
 * 全选或全不选
 * @param type checkAll:全选;其他:全不选
 */
 checkInItems: function (type) {
 var items = document.querySelectorAll('.checkItem');
 for (var i = 0; i < items.length; i++) {
 var item = items[i];
 if (type === 'checkAll') {
 item.checked = true;
 } else {
 item.checked = false;
 }
 }
 },
 /**
 * 勾选或不勾选
 */
 checkItem: function (event, index) {
 console.log("checkItem");
 var element = event.target;
 var $allCheck = document.querySelector(".checkAll");
 if (element.checked) {//勾选,加入已选择列表
 this.checkList.push(this.list[index]);
 this.checkAllElement($allCheck);
 } else {//不勾选,从已选择列表中去除
 this.checkList.splice(index, 1);
 $allCheck.checked = false;
 }
 },
 /**
 * 勾选全选框
 * @param element
 */
 checkAllElement: function (element) {
 //如果所有的商品都已被勾选,则勾选全选框
 if (this.checkList.length == this.list.length) {
 element.checked = true;
 }
 }
}

在 methods 中,我们定义了以下功能方法:

减少与增加购买数量。在减少购买数量方法中,我们对当前所对应商品的数量进行了二次确认,让代码变得更加健壮(HTML 模板可能被修改,button 被替换为 div 或者 span,那么 disabled 样式就变得无效啦)。

移除某件商品。因为购物车中的商品列表与实际勾选的商品列表数量上有可能存在差异,所以我们必须通过找到商品 ID 再进行删除。

勾选相关操作(全选、全不选、单选、单不选等)

2 style.css

[v-cloak] {
 display: none;
}
table {
 border: 1px solid #e9e9e9;
 border-collapse: collapse;
 border-spacing: 0;
 empty-cells: show;
}
th {
 font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 color: #4f6b72;
 border-right: 1px solid #C1DAD7;
 border-bottom: 1px solid #C1DAD7;
 border-top: 1px solid #C1DAD7;
 letter-spacing: 2px;
 text-transform: uppercase;
 text-align: left;
 padding: 6px 6px 6px 12px;
 background: #CAE8EA;
}
td {
 border-right: 1px solid #C1DAD7;
 border-bottom: 1px solid #C1DAD7;
 background: #fff;
 font-size:14px;
 padding: 6px 6px 6px 12px;
 color: #4f6b72;
}

这里定义了 v-cloak 样式,用于解决网络慢时的闪屏问题。还定义了表格的相关样式。

3 index.html

接着在 index.html 中引入 Vue 脚本与样式文件。基本模板如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>购物车</title>
 <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" >
</head>
<body>
<div id="app" v-cloak>
 ...
</div>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="index.js"></script>
</body>
</html>

因为有可能购物车中的商品被全部删除,所以我们在此加了判断,如果列表为空,则给出友好提示:

<template v-if="list.length">
 ...
</template>
<!--当购物车为空时,则提示-->
<div v-else>购物车内暂时没有商品</div>

接着用 table 来展示购物车内的商品列表:

<table>
 <thead>
 <tr>
 <th><input id="checkAll" type="checkbox" class="checkAll" @click="checkAllOrNot($event)"></th>
 <th>序号</th>
 <th>商品</th>
 <th>单价</th>
 <th>数量</th>
 <th>操作</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="(item,index) in list">
 <td><input type="checkbox" class="checkItem" @click="checkItem($event,index)"></td>
 <td>{{index+1}}</td>
 <td>{{item.name}}</td>
 <td>{{item.price}}</td>
 <td>
 <button @click="reduceCount(index)" :disabled="item.count===1">-</button>
 {{item.count}}
 <button @click="addCount(index)">+</button>
 </td>
 <td>
 <button @click="remove(index)">删除</button>
 </td>
 </tr>
 </tbody>
</table>
<div>总价:¥{{totalPrice}}</div>

使用 v-for 指令,循环迭代出商品列表。

表格内的每一个勾选框与按钮都绑定了相应的事件。全选框与每一行的勾选框还传入了原生 DOM 事件 $event,用于获取当前所操作的元素。

*这里对减少商品数量的按钮进行了判断,当相应商品的数量只剩下一个时,绑定 disabled 样式,让它变成不可用。

4 演示

Vue.js实现开发购物车功能的方法详解

本文jsfiddle示例DEMO地址:https://jsfiddle.net/deniro/hvq1y72o/

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
前端性能优化建议
Sep 17 Javascript
JS中多层次排序算法的实现代码
Jan 06 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 #Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 #Javascript
浅谈Node框架接入ELK实践总结
Feb 22 #Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 #Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 #Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 #Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 #Javascript
You might like
使用无限生命期Session的方法
2006/10/09 PHP
PHP与SQL注入攻击[二]
2007/04/17 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
一个实用的php验证码类
2017/07/06 PHP
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
javascript时间差插件分享
2016/07/18 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
js实现弹窗效果
2020/08/09 Javascript
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
几个数据库方面的面试题
2016/07/01 面试题
阳光体育活动实施方案
2014/05/25 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android
Python开发五子棋小游戏
2022/04/28 Python