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

好家伙,

 

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>