Vue实战-购物车案例

Vue实战——购物车案例

图片[1]-Vue实战-购物车案例-唐朝资源网

普通购物车

实现功能:添加商品到购物车,计算总价




    
    购物车
    
    
    
    


    th,td{
        text-align: center;
    }


购物车案例

商品名称 商品价格 商品数量 添加购物车
{{data.name}} {{data.price}} {{data.number}}

0">购物车:{{checkGroup}}

0" style="font-size: 20px">购物车:购物车为空


总价:{{totalPrice()}}
var vm = new Vue({ el: '#app', data: { //商品数据

图片[2]-Vue实战-购物车案例-唐朝资源网

dataList: [ {name: 'Python实战', price: 66, number: 2}, {name: 'Linux实战', price: 55, number: 1}, {name: 'Java实战', price: 77, number: 1}, ], //购物车 checkGroup: [], }, methods: { //计算总价 totalPrice(){ // 总价初始化 var total = 0 for (i in this.checkGroup){ console.log(i) // i是索引 total += this.checkGroup[i].price * this.checkGroup[i].number } return total } } })

图片[3]-Vue实战-购物车案例-唐朝资源网

PS:各种形式的for循环

上面我们使用了for(数组/对象中的i)的形式,js中for循环的常用形式有四种

//方式一: i是索引,循环选中的商品,基于迭代的循环
for (i in this.checkGroup){
                    console.log(i) // i是索引
                    total += this.checkGroup[i].price * this.checkGroup[i].number
 }

// 方式二: 基于索引的循环,最普通的
for (var i=0;i<this.checkGroup.length;i++) {
	total += this.checkGroup[i].price * this.checkGroup[i].number
	}

 //方式三: 基于迭代 for of (es6)
for (v of this.checkGroup) {
	total += v.price * v.number
 }

 // 方式四:forEach  可迭代对象(数组)的方法,数组而言v是值,i是索引
this.checkGroup.forEach(function(v,i){
  this.checkGroup.forEach((v,i)=>{
    total += v.price * v.number
                })

高级购物车一键加入购物车功能实现

基于普通购物车的功能:一键添加购物车功能

通过v-model双向绑定实现,输入框绑定事件,否则选择真假




    
    购物车
    
    

图片[4]-Vue实战-购物车案例-唐朝资源网

th,td{ text-align: center; }

购物车案例

商品名称 商品价格 商品数量 全选/取消全选 
{{data.name}} {{data.price}} {{data.number}}

0">购物车:{{checkGroup}}

0" style="font-size: 20px">购物车:购物车为空


总价:{{totalPrice()}}¥


是否全选:否 --- {{checkall}}

是否全选:是 --- {{checkall}}

var vm = new Vue({ el: '#app', data: { //商品数据

图片[5]-Vue实战-购物车案例-唐朝资源网

dataList: [ {name: 'Python实战', price: 66, number: 2}, {name: 'Linux实战', price: 55, number: 1}, {name: 'Java实战', price: 77, number: 1}, ], //购物车 checkGroup: [], //全选,默认不全选 checkall:false }, methods: { //计算总价 totalPrice(){ // 总价初始化 var total = 0 for (i in this.checkGroup){ console.log(i) // i是索引 total += this.checkGroup[i].price * this.checkGroup[i].number } return total }, //处理全选 handleAll(){ if (this.checkall){ //全选 this.checkGroup = this.dataList }else { this.checkGroup=[] } }, handleOne(){ //全选 if (this.checkGroup.length==this.dataList.length){ this.checkall=true //不全选 }else { this.checkall=false } } } })

货物数量加减法的实现

实现功能:通过加+、-样式控制商品数量的加减

注:库存情况暂不考虑,减少货品数量单独处理,解决减少量小于1的情况




    
    购物车
    
    
    
    


图片[6]-Vue实战-购物车案例-唐朝资源网

th,td{ text-align: center; }

购物车案例

商品名称 商品价格 商品数量 全选/取消全选 
{{data.name}} {{data.price}} {{data.number}}

0">购物车:{{checkGroup}}

0" style="font-size: 20px">购物车:购物车为空


总价:{{totalPrice()}}¥


是否全选:否 --- {{checkall}}

是否全选:是 --- {{checkall}}

var vm = new Vue({ el: '#app',

图片[7]-Vue实战-购物车案例-唐朝资源网

data: { //商品数据 dataList: [ {name: 'Python实战', price: 66, number: 2}, {name: 'Linux实战', price: 55, number: 1}, {name: 'Java实战', price: 77, number: 1}, ], //购物车 checkGroup: [], //全选,默认不全选 checkall:false }, methods: { //计算总价 totalPrice(){ // 总价初始化 var total = 0 for (i in this.checkGroup){ console.log(i) // i是索引 total += this.checkGroup[i].price * this.checkGroup[i].number } return total }, //处理全选 handleAll(){ if (this.checkall){ //全选 this.checkGroup = this.dataList }else { this.checkGroup=[] } }, handleOne(){ //全选 if (this.checkGroup.length==this.dataList.length){ this.checkall=true //不全选 }else { this.checkall=false } }, //商品减少 handleCount(data){ if (data.number<=1){ alert('不能再少了') } else { data.number-- } } } })

图片[8]-Vue实战-购物车案例-唐朝资源网

缺点:以下提示信息可以隐藏,个人仅供提示,产品删除不是自己写实现的

如有错误请指正谢谢~

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片