Vue.js实现的购物车功能详解

本文实例讲述了Vue.js实现的购物车功能。分享给大家供大家参考，具体如下：

使用计算属性，内置指令，方法等基础知识开发购物车。

需求分析：展示一个已经加入购物车的商品列表，包含商品名称、商品单价、购买数量和操作，以及最后确定是否选中商品的功能，总价格为选中商品的价格，够买数量可以增加减少，商品可以从购物车中移除。效果如图所示：

——实例来自《Vue.js实战》 第五章

逻辑整理：vue实例定义一个数组目录存放商品信息，定义方法与减少按钮，增加按钮等联系，动态改变商品数量，通过手柄拆卸()移除目录中的值；利用每个()遍历所有类型='复选框'的输入，修改它们的状态，最后用总价格()计算商品总价格。

index.html

div id='app '模板v-if='list.length '表和tr/th商品名称/th商品单价/th购买数量/th操作/th thin put type=' CheckBox ' name=' list ' @ click=' CheckBox()' id=' CheckBox '/th/tr/t body tr-v-for='(项目，索引)在list ' TD { { index 1 } }/TD { { item }。名称} }/TD { { item。价格} }/TD TD TD按钮@ click=' handleReduce(index)' : disabled=' item。count==' 1 ' class=' BTN '-/button { { item }。计数} }移除/button/TD TD style=' text-align : center；'输入类型=' checkbox ' name=' list ' @ click='总价()'/TD/tr/t body/table div id=' price '总价：{ { TotalPrice } }/div/template div v-else购物车为空/div/divstyle.css

* { margin : 0pxpadding : 0px }[v-斗篷]{ display : none；} # app { width: 200px高度： 200像素；余量： 10px自动；文本对齐：中心；} #价格{宽度： 457像素高度： 40pxborder: 1px实心# e9e 9e 9 border-top : 0；线高： 40px}表格{边框： 1px实心# e9e 9；边界崩溃：崩溃；边框间距： 0;空细胞：显示；}th，TD { padd : 8px 16pxborder :1 px实心# e9e 9 e 9文本-左对齐：} th { background : # f7f 7；color : # 5c6c 77 font-weight : 600；空白： nowrap}.btn { width: 20pxheight: 20px边界半径： 50%;border:1px固体# ccccccbackground : # ffffcolor : # 778899 }。btns { width : 40px heart : 20pxborder-radius : 5px；border:1px固体# ccccccbackground : # ffffcolor : # 778899线高： 20px}app.js

var app=new Vue({ el:'#app '，data:{ list: [ { id:1，name:'iPhone 7 '，price:6188，count:1 }，{ id:2，name: ' iPad Pro '，price:5888，count:1 }，{ id:3，name 3333333333减少按钮if(this.list[index]).count===1){ return；} this.list[index].计数-;这个$期权。方法。总价格()；}，handleAdd:函数（索引){//增加按钮这个。列表[索引]。计数；这个$期权。方法。总价格()；}，handleRemove:函数（索引){//移除按钮this.list.splice(索引，1);$('tr ').eq(指数1)。移除(' input[type=' checkbox ']')；这个$期权。方法。总价格()；}，checkBox:函数(){//选中状态if($('#checkBox ').是(' :已选中')==true){ $(' input[type=' checkbox ']').每个（函数(){ $('input[type='checkbox']').attr('checked '，true)；});} else { $(' input[type=' checkbox ']').每个（函数(){ $('input[type='checkbox']').attr('checked '，false)；});}这个$期权。方法。总价格()；}，总价：函数(){//计算总价格var total=0；for(var I=0；我应用。名单。长度；I){ var item=app。列表[I]；if($('input[type='checkbox']').等式^ 1 .是(' : checked '){ total=item。价格*项目。计数；} }应用程序。TotalPrice=总计。ToString().替换(/\B(？=(\d{3}) $)/g，'，')；} }});开源代码库地址：https://github。com/GitHubVikas/Yao/tree/master/Demone

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