好家伙,

1.实现总价的动态计算

商品数量被动态的改变后,

相应的总价同样会改变

所以我们需要重新计算总价格了

这个的实现并不难

我只要拿到商品的数量就好了

我们用一个计算属性计算出已勾选商品的总数量

在App.vue中

total(){

      return this.list.filter(item=>item.goods_stats)

      .reduce((t,item) =>(t+=item.goods_count),0)

    }

组件调用部分:

<Footer :isfull="fullState"

    :all="total"

    @full-change="getFullState"

    :amount="amt"></Footer>

随后,

在Footer.vue组件中,定义新的props:all

 props:{

    //全选的状态

    isfull:{

      type:Boolean,

      default:true

    },

    //总价格

    amount:{

      type:Number,

      default:0

    },

    //已勾选的商品的总数量

    all:{

      type:Number,

      default:0

    }

  },

拿到其中的值:

<div>

      <span>合计：</span>

      <span class="total-price">￥{{ all }}</span>

    </div>

补充:

实现商品数量的减:

在Counter.vue组件中添加方法:

sub(){

      if(this.num-1 === 0) return

      const obj ={ id:this.id,value:this.num-1 }

      //通过EventBus把obj对象,发送给App.vue组件

      console.log(obj)

      bus.$emit('share',obj)

    }

点击绑定方法:

<button type="button" class="btn btn-light btn-sm"

    @click="sub">-</button>

    <!-- 购买的数量 -->

    <span class="number-box">{{ num }}</span>

    <!-- 加 1 的按钮 -->

    <button type="button" class="btn btn-light btn-sm"

    @click="add">+</button>

巴特西

第八十五篇：Vue购物车(六) 总价的动态计算

1.实现总价的动态计算

最新文章

热门文章