Vue.js实现的购物车功能详解
本文实例讲述了Vue.js实现的购物车功能。分享给大家供大家参考,具体如下:
创新互联公司专注于阜宁网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供阜宁营销型网站建设,阜宁网站制作、阜宁网页设计、阜宁网站官网定制、成都微信小程序服务,打造阜宁网络公司原创品牌,更为您提供阜宁网站排名全网营销落地服务。
使用计算属性,内置指令,方法等基础知识开发购物车。
需求分析:展示一个已经加入购物车的商品列表,包含商品名称、商品单价、购买数量和操作,以及最后确定是否选中商品的功能,总价格为选中商品的价格,够买数量可以增加减少,商品可以从购物车中移除。效果如图所示:
——实例来自《Vue.js实战》第五章
逻辑整理:vue实例定义一个数组list存放商品信息,定义方法与减少按钮,增加按钮等联系,动态改变商品数量,通过handleRemove()
移除list中的值;利用each()
遍历所有type='checkbox'
的input,修改它们的状态,最后用totalPrices()
计算商品总价格。
index.html
商品名称 商品单价 购买数量 操作 {{ index + 1 }} {{ item.name }} {{ item.price }} {{ item.count }} 总价:¥{{totalPrice}}购物车为空
style.css
*{ margin: 0px; padding: 0px; } [v-cloak] { display: none; } #app{ width: 200px; height: 200px; margin: 10px auto; text-align: center; } #price{ width: 457px; height: 40px; border: 1px solid #e9e9e9; border-top: 0; line-height: 40px; } table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; empty-cells: show; } th,td{ padding: 8px 16px; border:1px solid #e9e9e9e9; text-align: left; } th{ background: #f7f7f7; color: #5c6c77; font-weight: 600; white-space: nowrap; } .btn{ width: 20px; height: 20px; border-radius: 50%; border:1px solid #cccccc; background: #ffffff; color: #778899; } .btns{ width: 40px; height: 20px; border-radius: 5px; border:1px solid #cccccc; background: #ffffff; color: #778899; line-height: 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:'MaxBook Pro', price:21488, count:1 } ], totalPrice: 0 }, methods:{ handleReduce: function (index) {//减少按钮 if(this.list[index].count === 1){ return; } this.list[index].count--; this.$options.methods.totalPrices(); }, handleAdd: function (index) {//增加按钮 this.list[index].count++; this.$options.methods.totalPrices(); }, handleRemove: function (index) {//移除按钮 this.list.splice(index, 1); $("tr").eq(index+1).remove("input[type='checkbox']"); this.$options.methods.totalPrices(); }, checkBox: function (){//选中状态 if($("#checkBox").is(':checked')==true){ $("input[type='checkbox']").each(function(){ $("input[type='checkbox']").attr("checked",true); }); }else{ $("input[type='checkbox']").each(function(){ $("input[type='checkbox']").attr("checked",false); }); } this.$options.methods.totalPrices(); }, totalPrices: function (){//计算总价格 var total = 0; for(var i = 0;i < app.list.length;i++){ var item = app.list[i]; if($("input[type='checkbox']").eq(i+1).is(':checked')){ total += item.price * item.count; } } app.totalPrice = total.toString().replace(/\B(?=(\d{3})+$)/g,','); } } });
GitHub地址:https://github.com/GitHubVikas/Yao/tree/master/DemoOne
希望本文所述对大家vue.js程序设计有所帮助。
文章名称:Vue.js实现的购物车功能详解
网页URL:http://scyanting.com/article/igoppj.html