摘要:關(guān)于加減組件及價(jià)格計(jì)算實(shí)現(xiàn)效果一組件初始狀態(tài)只顯示,點(diǎn)擊號(hào)類(lèi)自父組件一個(gè)新屬性同時(shí)顯示數(shù)量,出現(xiàn)號(hào)部分減號(hào)區(qū)減號(hào)區(qū)商品數(shù)量區(qū)商品數(shù)量區(qū)加號(hào)區(qū)加號(hào)區(qū)部分點(diǎn)擊加號(hào)執(zhí)行的
關(guān)于加/減組件及價(jià)格計(jì)算
實(shí)現(xiàn)效果:
(一)cartControl.vue組件
初始狀態(tài)只顯示+,點(diǎn)擊+號(hào),food(類(lèi)自父組件)set一個(gè)新屬性count,同時(shí)顯示數(shù)量,出現(xiàn)-號(hào)部分
JS部分:
export default{ props:{ food:{ type:Object } }, methods:{ //點(diǎn)擊加號(hào)執(zhí)行的事件 addCart(event){ //去除引入better-scroll自帶的事件點(diǎn)擊 if(!event._constructed){ return; } //初始狀態(tài)下,food.count是不存在的 if(!this.food.count){ //給food對(duì)象新增一個(gè)count屬性,初始值為1 Vue.set(this.food,"count",1); } else{ //如果count的值存在 //點(diǎn)擊加號(hào)的時(shí)候,每次count值加1 this.food.count++; } }, decreaseCart(event){ //去除引入better-scroll自帶的點(diǎn)擊事件 if(!event._constructed){ return; } //點(diǎn)擊減號(hào)時(shí)候,food.count每次減一 this.food.count--; } } }
(二)shopCart.vue組件
價(jià)格及菜品顯示部分
**JS部分:**0}"> 0}">{{totalCount}}0}"> ¥{{totalPrice}}另需配送費(fèi)¥{{deliveryPrice}}{{payDesc}}購(gòu)物車(chē)
清空
- {{food.name}}
¥{{food.price * food.count}}
goods父組件中:
goods.vue中的seller來(lái)自于home組件
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/106563.html
摘要:導(dǎo)航欄導(dǎo)航欄用的組件,設(shè)置其水平方向滑動(dòng),點(diǎn)擊到的字體會(huì)變換樣式。而且,導(dǎo)航欄點(diǎn)擊不同的類(lèi)別會(huì)將主頁(yè)替換成不同的結(jié)構(gòu),這就要將最開(kāi)始的主頁(yè)結(jié)構(gòu)隱藏起來(lái)。 前言 購(gòu)物節(jié)又要來(lái)啦?。。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻?!衣服打折了?。⌒』锇閭儨?zhǔn)備好買(mǎi)買(mǎi)買(mǎi)了嗎?。?!讓我看看我還多少余額哈?。M心期待(* ̄︶ ̄))(10秒后......)好吧我還是寫(xiě)個(gè)電商小程序過(guò)過(guò)癮好了。[冷漠臉]咳咳,讓我們進(jìn)入正題...
摘要:導(dǎo)航欄導(dǎo)航欄用的組件,設(shè)置其水平方向滑動(dòng),點(diǎn)擊到的字體會(huì)變換樣式。而且,導(dǎo)航欄點(diǎn)擊不同的類(lèi)別會(huì)將主頁(yè)替換成不同的結(jié)構(gòu),這就要將最開(kāi)始的主頁(yè)結(jié)構(gòu)隱藏起來(lái)。 前言 購(gòu)物節(jié)又要來(lái)啦?。。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻?!衣服打折了?。⌒』锇閭儨?zhǔn)備好買(mǎi)買(mǎi)買(mǎi)了嗎?。。∽屛铱纯次疫€多少余額哈?。M心期待(* ̄︶ ̄))(10秒后......)好吧我還是寫(xiě)個(gè)電商小程序過(guò)過(guò)癮好了。[冷漠臉]咳咳,讓我們進(jìn)入正題...
閱讀 2443·2021-11-22 14:56
閱讀 1241·2019-08-30 15:55
閱讀 3267·2019-08-29 13:29
閱讀 1423·2019-08-26 13:56
閱讀 3644·2019-08-26 13:37
閱讀 618·2019-08-26 13:33
閱讀 3408·2019-08-26 13:33
閱讀 2298·2019-08-26 13:33