本方法使用的是父元件作為中間元件進行傳值
="iconfont iconjian" @click.stop=
"foodsubstract(menu, f, m)" v-show=
"menu.foodnum"
>
<
/i>
"menu.foodnum"
>
}<
/span>
="iconfont iconadd1" @click.stop=
"foodadd(menu, f, m)"
>
<
/i>
// 新增食物
foodadd
(menu, cindex, findex)
this
.$emit
('addfooditem'
, fooditem)
}// 父元件購物車物件
curoderlist:
// 父元件接收並新增入購物車
fooditemadd
(food)
else}}
this
.curoderlist.totalnum++
this
.curoderlist.totalprice += food.newprice
this
.curoderlist.totaloldprice += food.oldprice
}
// 父元件反向操作食物元件的狀態資料
itemsubstract:'',
itemadd:
''// 父元件通過props將curoderlist物件傳給子元件
// 購物車子元件渲染部分略過
// 購物車反向操作食物列表
="iconfont iconjian" @click=
"substractitem(food)"
>
<
/i>
}="iconfont iconadd1" @click=
"additem(food)"
>
<
/i>
// 通過子傳父的方式，告知父元件狀態更新
additem
(food)
// 父元件更新函式
additem
(food)-$
-$` this
.fooditemadd
(food)
}// 食物列表元件
// watch裡監視
itemsubstract
(newval)},
itemadd
(newval)
}// 更新函式和字串拆分函式
// 反向單個增加食物
reversefoodadd
(key)
,// 獲取字串關鍵字
getstrkey
(str, i)
其次，購物車常有的功能基本都實現了，我的方式是通過父元件來充當中間元件的角色，還有一種方法時直接使用vuex也可以實現，這裡就不詳細討論了
購物車功能實現
大神跟我說學好基本的jquery只需要做好三個基本功能就好了，第乙個是購物車。現在開始實踐，css神馬的就忽略簡單點了。其實這個主要就是dom操作和選擇器的應用。大神果然比較牛。product number price choose120 2100350 410product number pric...
vant實現購物車功能
做一些電商或者支付頁面 肯定少不了購物車功能 一方面正反選 另一方面動態 全選之後再去加減商品數量 這裡必須考慮 裡面有很多蛋疼的問題 猛的一想 感覺思路很清晰 但是 真正動起手來 就各種bug出來了 說實話 搞這個購物車 浪費我整整一下午的時間 當我回過頭捋一遍 其實 半小時就能完事。就是因為全選...
vue實現簡單的購物車
lang en dir ltr charset utf 8 購物車例項title rel stylesheet href style.css type text css head on cloak v if list.length 0 th 商品名稱th 商品 th 購買數量th 操作th tr t...