锐客网

  1. 首页 > it技术 > >

Vue实现简易购物车页面

VUE实现简易购物车效果，供大家参考，具体内容如下
简易的购物车小demo
引用了一下bootstrap3，的表格
Vue实现简易购物车页面
文章图片

全选商品信息单价数量金额操作
Vue实现简易购物车页面
文章图片
{{date.name}}		{{date.networkType}}
【Vue实现简易购物车页面】{{date.colorClass}}
{{date.packageType}}
{{date.rom}}
{{date.purchaseMethod}}

{{date.price}}
{{getSumje(date)}}.00
移入收藏夹
删除
全选删除 已选商品：{{checkgroup.length}}
合计（不含运费）：{{getSum()}}
结算

CSS：
#gouwuche { width: 1200px; height: ; margin: 0 auto; }.box { width: 1200px; height: 50px; margin: 30px auto; display: flex; justify-content: space-between; align-items: center; background-color: #C4E3F3; }.boxa { width: 780px; height: 50px; }.boxa a { margin-right: 50px; }.boxb { width: 120px; height: 50px; background-color: #C0C0C0; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; }.boxc { width: 300px; height: 50px; display: flex; align-items: center; justify-content: space-between; }input { width: 50px; text-align: center; }img { width: 60px; height: 60px; }a { text-decoration: none; color: #000; }* { font-size: 12px; }p { margin: 0; padding: 0; line-height: 1.9; }.danjia { font-size: 16px; }.jiner { font-size: 18px; color: #FF8C00; }.bgcolor{ background-color: rgba(205,205,205,0.2); }

js：
var gouwuche = new Vue({ el:"#gouwuche", data:{ checkgroup:[], isAllChage:false, isActive:false, arr:[ {//商品名name:"小米 note8 Pro",//图片地址imges:"img/t1.jpg",//颜色分类colorClass:"机身颜色：冰翡翠",//网络类型networkType:"网络类型：4G+全网通",//套餐类型packageType:"套餐类型：官方标配",//存储容量rom:"存储容量：6+128GB",//购买方式purchaseMethod:"官方旗舰店",//单价price:1299.00,//数量numbers:1,//金额money:1299.00,//索引id:"1", }, {//商品名name:"红米 k30 5G",//图片地址imges:"img/t3.jpg",//颜色分类colorClass:"机身颜色：紫玉幻境",//网络类型networkType:"网络类型：5G+全网通",//套餐类型packageType:"套餐类型：官方标配",//存储容量rom:"存储容量：8+128GB",//购买方式purchaseMethod:"官方旗舰店",//单价price:1499.00,//数量numbers:1,//金额money:1499.00,//索引id:"2", }, {//商品名name:"红米 k30 Pro",//图片地址imges:"img/t4.jpg",//颜色分类colorClass:"机身颜色：象牙白",//网络类型networkType:"网络类型：5G+全网通",//套餐类型packageType:"套餐类型：官方标配",//存储容量rom:"存储容量：8+256GB",//购买方式purchaseMethod:"官方旗舰店",//单价price:3999.00,//数量numbers:1,//金额money:3999.00,//索引id:"3", }, {//商品名name:"红米 k20 Pro",//图片地址imges:"img/t4.jpg",//颜色分类colorClass:"机身颜色：象牙白",//网络类型networkType:"网络类型：5G+全网通",//套餐类型packageType:"套餐类型：官方标配",//存储容量rom:"存储容量：8+256GB",//购买方式purchaseMethod:"官方旗舰店",//单价price:3999.00,//数量numbers:1,//金额money:3999.00,//索引id:"3", } ], }, methods:{ inshow:function(){this.isActive = !this.isActive; }, //总额 getSum:function(){var sum = 0; for(var i in this.checkgroup){sum += this.checkgroup[i].numbers * this.checkgroup[i].price; }return sum; }, //单品总额 getSumje:function(date){var sum = date.price; sum *= date.numbers; return sum; }, //判断全选框 handlechange:function(){if(this.isAllChange){this.checkgroup = this.arr; }else{this.checkgroup = []; } }, //判断全选框 handleLiChange:function(){if(this.checkgroup.length !== this.arr.length){this.isAllChange = false; }else{this.isAllChange = true; } }, //数量减1 handleDelclike:function(date){var numbers = date.numbers--; if(numbers === 1){date.numbers = 1; } }, //删除 rmove:function(index){var that = this; that.arr.splice(index,1); that.checkgroup.splice(index,1); } } })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

    推荐阅读


    上一篇：学习的力量

    下一篇：C语言实现输入两个数字将其按从小到大输出的方法