let count=0
this.selefoodsArr.forEach((rfoods) =>{ // 形参 rfoods 实参 是 foods
count += rfoods.count
});
return count;
},
payDesc (){ //控制底部右边内容随food的变化而变化，payDesc()控制显示内容，enough 添加类调整显示样式
let diff = this.minPrice - this.totalPrice
if (!this.totalPrice) {
return `￥${this.minPrice}起送`
} else if (diff > 0) {
return `还差￥${diff}元`
} else {
return '去结算'
}
}
}
这样就渲染到 template 里了
<div class="shopCart">
<div class="content">
<div class="content-left">
<div class="logo-wrapper">
<!--徽章 展示选中商品的个数-->
<div class="badge" v-show="totalCount">
{{totalCount}}
</div>
<!--购物车 图标 选择商品和未选择商品 时 动态改变 样式 条件：只要选择了商品即总价不为0 ，样式变-->
<div class="logo" :class="{'active':totalCount}">
<i class="icon-shopping_cart"></i>
</div>
</div>
<!--同理： 总价 不为0 字体高亮-->
<div class="price" :class="{'active':totalPrice}">
￥{{totalPrice}}
</div>
<!--配送费 data.json 提供-->
<div class="desc">
另需要配送费￥{{deliveryPrice}}元
</div>
</div>
<!--根据条件 动态 改变样式-->
<div class="content-right" :class="{'enough':totalPrice>=minPrice}">
{{payDesc}}
</div>
</div>
</div>
相关样式
&.active
color white&.enough
background #00b43c
color white
总结：通过以上学习我们能发现，selectFoods()的变化起着关键作用，它的变化会引起DOM的变化，并最终体现到界面上，而我们不用关注DOM内部的具体实现，这就是vue的一大好处。如果采用jQuery完成这些功能会略显繁杂。
二、cartControl 组件
说明：这个组件是控制购物车小球的。其中涉及到小球的动画
(1) 新增属性 count
说明：
在goods 下的 foods 添加一个属性 count,用来存储用户选中的商品个数,计算商品总价 以及 关联徽章（显示用户选择商品的个数）的变化
方法：通过import Vue from ‘vue’;使用set接口，通过vue.set()添加属性，当它变化时就能被检测到，从而父组件能获取到count值（遍历选中的商品时使用）
methods:{
addCart(event){ // 点击count 加，
//console.log(event.target);
if (!event._constructed) { // 去掉自带click事件的点击
