Vue模仿饿了么实现购物车功能

最新推荐文章于 2021-01-06 14:41:36 发布

ι丶小叫花子灬

最新推荐文章于 2021-01-06 14:41:36 发布

阅读量991

点赞数 1

分类专栏： vue 移动端

本文链接：https://blog.csdn.net/qq_25245553/article/details/108629873

版权

效果图：

在这里插入图片描述

食物列表添加

本方法使用的是父组件作为中间组件进行传值

<i class="iconfont iconjian" @click.stop="foodSubstract(menu, f, m)" v-show="menu.foodNum"></i>
<span v-show="menu.foodNum">{
   {
   menu.foodNum}}</span>
<i class="iconfont iconadd1" @click.stop="foodAdd(menu, f, m)"></i>
// 添加食物
foodAdd (menu, cIndex, fIndex) {
   
  this.foodCates[cIndex].cateNum++
  this.foodList[cIndex].menuItems[fIndex].foodNum++
  let foodItem = {
   
    // 传下标，方便后面反向操作快速定位
    cIndex: cIndex,
    fIndex: fIndex,
    foodName: menu