VUE实现购物车

2019-08-13 17:53:16 26

vue实现购物车

大家好我是猪哥哥好久没更新博客了,今天用vue实现一个简单的购物车,效果图如下:


淮北网站建设

下面开始我们的舞台


由于业务代码太多,我们将 HTML、CSS、Javascript 分离为3个文件。便于小伙们查阅

  • index.html(引入资源及模版)

  • index.js(Vue实例及业务代码)

  • style.css (样式)

先在 index.html 中 引入 Vue.js以及相关资源,创建一个根元素来挂载 Vue实例



为了演示方便,我们需要的数据直接写在data里面,实际项目中应该通过Ajax从服务端动态获取的。

淮北网站建设

数据构建好后,可以在index.html中展示列表了,毫无疑问,肯定会用到循环 v-for 不过在此之前,我们先做一些小的优化,因为每个商品都是可以从购物车移除的,所以当列表为空时,在页面中显示一个“购物车为空” 的提示更为友好,我们可以通过判断数组list的长度来实现该功能:

淮北网站建设

<templete>里的代码主要分为两个部分,一个是商品的列表信息,我们可以用表格来展示,另一部分就是带有千位分割符的商品总价,(每隔三位数加一个逗号)。这部分代码如下:

淮北网站建设


总价 totalPrice 是依赖商品的列表而动态改变的,所以我们可以使用计算属性来实现,这里有顺便讲解下分割符号要用到的知识点

我们罗列下 正则表达式符号需要用到的元字符:

1: \B 

元字符匹配非单词边界。匹配位置的上一个和下一个字符的类型是相同的:即必须同时是单词,或必须同时是非单词字符。字符串的开头和结尾处被视为非单词字符。


淮北网站建设

如果未找到匹配,则返回 null。

2: (?=) 名词解释:?=n 量词匹配任何其后紧接指定字符串 n 的字符串。

用法:如图


淮北网站建设

这个例子比较难理解,就是查找all 前面出现的 指定字符 这里是 is

相信小伙伴们看到这里已经知道下面千位分割符需要用到的知识点了吧,我们继续开始我们的教程

我们需要用到的正则 核心: 


淮北网站建设

淮北网站建设

淮北网站建设

淮北网站建设

淮北网站建设

淮北网站建设

淮北网站建设


感谢大家对淮北飞秋科技的信任和支持。