摘要:關于加減組件及價格計算實現效果一組件初始狀態只顯示,點擊號類自父組件一個新屬性同時顯示數量,出現號部分減號區減號區商品數量區商品數量區加號區加號區部分點擊加號執行的
關于加/減組件及價格計算
實現效果:
(一)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組件
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/106563.html
摘要:導航欄導航欄用的組件,設置其水平方向滑動,點擊到的字體會變換樣式。而且,導航欄點擊不同的類別會將主頁替換成不同的結構,這就要將最開始的主頁結構隱藏起來。 前言 購物節又要來啦!!(撒花撒花!)零食打折啦!!衣服打折了!!小伙伴們準備好買買買了嗎!!!讓我看看我還多少余額哈!(滿心期待(* ̄︶ ̄))(10秒后......)好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳,讓我們進入正題...
摘要:導航欄導航欄用的組件,設置其水平方向滑動,點擊到的字體會變換樣式。而且,導航欄點擊不同的類別會將主頁替換成不同的結構,這就要將最開始的主頁結構隱藏起來。 前言 購物節又要來啦!!(撒花撒花!)零食打折啦!!衣服打折了!!小伙伴們準備好買買買了嗎!!!讓我看看我還多少余額哈!(滿心期待(* ̄︶ ̄))(10秒后......)好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳,讓我們進入正題...
閱讀 2373·2021-11-22 14:56
閱讀 1180·2019-08-30 15:55
閱讀 3211·2019-08-29 13:29
閱讀 1358·2019-08-26 13:56
閱讀 3498·2019-08-26 13:37
閱讀 566·2019-08-26 13:33
閱讀 3354·2019-08-26 13:33
閱讀 2235·2019-08-26 13:33