摘要:关于加减组件及价格计算实现效果一组件初始状态只显示,点击号类自父组件一个新属性同时显示数量,出现号部分减号区减号区商品数量区商品数量区加号区加号区部分点击加号执行的
关于加/减组件及价格计算
实现效果:
(一)cartControl.vue组件
初始状态只显示+,点击+号,food(类自父组件)set一个新属性count,同时显示数量,出现-号部分
JS部分:
export default{ props:{ food:{ type:Object } }, methods:{ //点击加号执行的事件 addCart(event){ //去除引入better-scroll自带的事件点击 if(!event._constructed){ return; } //初始状态下,food.count是不存在的 if(!this.food.count){ //给food对象新增一个count属性,初始值为1 Vue.set(this.food,"count",1); } else{ //如果count的值存在 //点击加号的时候,每次count值加1 this.food.count++; } }, decreaseCart(event){ //去除引入better-scroll自带的点击事件 if(!event._constructed){ return; } //点击减号时候,food.count每次减一 this.food.count--; } } }
(二)shopCart.vue组件
价格及菜品显示部分
**JS部分:**0}"> 0}">{{totalCount}}0}"> ¥{{totalPrice}}另需配送费¥{{deliveryPrice}}{{payDesc}}购物车
清空
- {{food.name}}
¥{{food.price * food.count}}
goods父组件中:
goods.vue中的seller来自于home组件
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/106563.html
摘要:导航栏导航栏用的组件,设置其水平方向滑动,点击到的字体会变换样式。而且,导航栏点击不同的类别会将主页替换成不同的结构,这就要将最开始的主页结构隐藏起来。 前言 购物节又要来啦!!(撒花撒花!)零食打折啦!!衣服打折了!!小伙伴们准备好买买买了吗!!!让我看看我还多少余额哈!(满心期待(* ̄︶ ̄))(10秒后......)好吧我还是写个电商小程序过过瘾好了。[冷漠脸]咳咳,让我们进入正题...
摘要:导航栏导航栏用的组件,设置其水平方向滑动,点击到的字体会变换样式。而且,导航栏点击不同的类别会将主页替换成不同的结构,这就要将最开始的主页结构隐藏起来。 前言 购物节又要来啦!!(撒花撒花!)零食打折啦!!衣服打折了!!小伙伴们准备好买买买了吗!!!让我看看我还多少余额哈!(满心期待(* ̄︶ ̄))(10秒后......)好吧我还是写个电商小程序过过瘾好了。[冷漠脸]咳咳,让我们进入正题...
阅读 2370·2021-11-22 14:56
阅读 1178·2019-08-30 15:55
阅读 3208·2019-08-29 13:29
阅读 1357·2019-08-26 13:56
阅读 3486·2019-08-26 13:37
阅读 560·2019-08-26 13:33
阅读 3351·2019-08-26 13:33
阅读 2231·2019-08-26 13:33