vue实现淘宝购物车功能详解

本文介绍了vue实现的模拟淘宝购物车的功能。分享给大家参考，如下：

下面是一个知名的淘宝购物车页面。今天要解释的案例是用vue.js制作一个类似的页面

首先，简单介绍一下vue.js可能用到的一些用法：

V-bind，绑定属性；例如，v-bind : ' { ' class 1 ' : flag } '，这是绑定样式的常用方法。如果标志为真，则class=class1；V-bind: src=' http: image '，image是图像的路径；

V-if='flag '和v-show='flag '，如果flag为真，则绑定为“可见”。不同的是，v-show在开始时是在DOM中呈现的，但是它的显示是更改的，如果v-if为false，它将从HTML代码中移除。

on:或@，样式绑定on:click=' dosomething()'或@ click=' dosomething()'，单击可触发do someting函数；

V-for循环，v-for=' items in items '，items是数组，item是items数组的值而不是索引；

需要注意的是，当这个范围发生变化时：当这个范围发生变化时，我们设置var self=this，并在以后的使用中使用self代替；

以下是HTML代码：

超文本标记语言标题购物车/title meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8' link rel='样式表type=' text/CSS ' href=' shop。CSS ' rel='外部无跟随'/head body div id=' app ' div class=' header ' span style=' margin-left : 75px；'商品/span span style='左边距： 70px'单价/span span style='左边距： 35px'数量/span span style='左边距： 40px'总价/span/div v-for='货物中的项目' div class=' show ' v-show='项目。所选的“span class=”choice”v-bind : class=“{”checked”:项。选中的{ } ' @单击=' check(item)'/span div style=' float 3360 left；左边距left : 20p ximg v-bind : src=' http : item。图像“v-bind : alt=”项。alt ' class=' image '/span class=' text ' { item。name } }/span/div span style=' float 3360 left；左边距left : 20 pxmargin-top :20 px；宽度：40 px{{item.price}}元/span div style='左浮动：左边距左： 30px边距-top : 20px；span v-: click=' changeNum(item，-1)' a href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '-/a/span输入v-model=' item。number ' class=' output ' disabled/span v-3360 click=' changeNum(item，1)' a href=' JavaScript : void(0)' rel=' external no follow左边距左： 30px边距-top : 25px；宽度：51 px{{item.price * item.number}}元/div span class=' icon ' @ click=' seed=true '/span/div/div！-footer-div id=' footer ' span class=' choice ' style=' margin-top :18 px；v-bind : class=' { ' checked ' : checkAll flag } '/span a href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' @ click=' checkAll(true)'全选/a a href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' style=' color :@click='checkAll(false)'取消全选/a span style=' display : in-block；左边距左侧：70像素宽度：95 px总计：{ { total } }元/span spanbutton class='count '结算/button/span/div div id=' info ' v-show=' seed ' p style=' margin-top :20 px；'是否删除该商品？/pdiv class=' close ' @ click=' seed=false ' times/div button class=' get ' style=' padding-left :10 px；@ click=' yes/button button class=' get ' style=' margin-left :20 px；'@ click=' seed=false ' no/button/div class=' shadow ' v-show=' seed '/div/div/body script src=' http 3360 ./src/vue。量滴js '/script script src=' http :/src/vue-资源。量滴js /脚本脚本src=' http :商店。js /脚本/html下面的是射流研究…的代码：

var vm=new Vue({ el:'#app '，data:{ total: 0，total: 0，goods: []，//商品为数组checkAllFlag: false，seen: false，delFlag: true }，mount ed : function(){ this。good list()；}，methods:{ //改变商品数量changeNum:function(项目，标志){ if(标志0){ item。数量；} else { item。数字-；if(项目。第1项){ item。number=1；} }这个。total money()；}, //是否选中检查：功能(项目){ if(项目类型。选中=='未定义'){这.$set(项目，"选中“，真的)；//局部为项目添加"已检查",值为true }else{ item.checked=！item.checked}这个。total money()；}, //通过$http.get方法创建交互式、快速动态网页应用的网页开发技术地交互获取商品信息，一定要引入虚拟资源组件好列表：函数(){ var self=this这个$http.get('shop.json ').然后（函数{自我。货物=资源数据。结果。货物；}，function(){ console。日志('失败')；});}, //是否全选checkall :函数(标志){ this。checkall标志=flagvar self=这个；this.goods.forEach(函数（值，索引){ if(值类型。选中=='未定义'){ self .$set(值，“检查过了”，自我。checkall标志)；} else { value。选中=自我。checkall标志；} });这个。total money()；}, //结算选中商品的价格totalMoney:function () { //初始化总价这个。total all=0；var self=这个；//通过为每一个循环判断是否被选中this.goods.forEach(函数（值，索引){ if(值。选中){ self。全部合计=值。价格*价值。数量；} });} }})下面是半铸钢钢性铸铁(铸造半钢)代码：

* { padd : 0；保证金： 0；} a { text-decoration : none颜色：黑色；} # app { width: 500px高度： 600像素；border: 1px固体；绝对位置：页边距-顶部：20 px左边距left:50px}。标题{宽度： 500像素重量： 30像素线高： 30px背景色：深洋红色；}.标题范围{ display : inline-block；宽度： 50px高度：30px }。显示{宽度： 500像素高度： 85px边距-top : 5px；} #页脚{位置：绝对值；底部： 0；宽度： 500像素；高度： 50px背景-颜色： # c7c 9；}.输出{ width: 40pxheight: 20px }。图像{ width: 60px高度： 80pxfloat:left}。选择{ display : inline-block；宽度： 15px高度： 15px边框半径： 15pxborder: 1px固体；向左浮动：边距-top : 30px；左边距left: 20px}。选中{底色：深橙色；}.图标{背景图像： URL(del。巴布亚新几内亚)；显示器：内联块；宽度： 30px高度： 30px左边距左侧： 50px边距-top : 20px；}.文本{ display : inline-block；宽度：50 px高度：20 px线高：20 pxfont :12 pxmargin-top :20 px；边距-左侧：5 pxfloat:left}。计数{宽度：100像素高度：40 px背景色：红色；线高：40 pxfont-size :16 px左边距left :40 pxmargin-top :5 px；} #页脚{ display : inline-block；边距-左侧：5 px高度：22px} #信息{宽度：250px高度：100 px位置：绝对；border:1px固体；边距-top :-250 px；左边距左侧：120像素背景-颜色： # c7c 9；文本对齐：居中；z指数：999;}.获取{宽度：80像素高度：30 pxfont :17 pxmargin-top :10 px；}.阴影{宽度：100%；高度：100%;背景-颜色：黑色；opacity:0.8边距-top :-480 px；z索引：1;}.关闭{ position : absolute eright :2 xtop :-5px；光标：指针指针；}下面是数据代码：

{ 'status':1，' result':{ 'total':50，' goods':[ { 'name': '香烟，'价格':15,'数量':1,'精选':真，'形象':/img/xiangyan.jpg '，' alt': '香烟}，{ 'name': '啤酒，'价格' : 12,'数量' : 1,'所选' :真，'图片' :/img/pjiu.jpg '，' alt': '啤酒}，{ 'name': '打火机，'价格' : 2,'数量' : 1,'选择' :真，'图像' :/img/fire.jpg '，' alt': '打火机}，{ 'name': '鸡腿，'价格' : 5,'数量' : 1,'所选' :真，'图片' :/img/chick.jpg '，' alt': '鸡腿}，{ 'name': '垃圾袋，'价格' : 8,'数量' : 1,'所选' :真，'图片' :/img/bush.jpg '，' alt': '垃圾袋} ] },消息":"实现的结果如下图：

代码下载：https://github。com/creator/vue/raw/master/vue。活力

或者点击此处本站下载。

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