css box-sizing
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
组件的动态样式
selectFoods
props: {
seller:{
type:Object
},
selectFoods: {
type:Array,
default() {
return [
{
price:50,
count:2
}
];
}
},
这是一个数组，将来添加的商品的价格和数量都会被添加到这个数组，price和count就是我自己模拟的数据（因为选择商品的组件还没有开发）。我们会应用这些数据，对购物车进行一些计算。
计算属性
购物车组件需要计算商品的总数和总价，而这两个变量是给出数据里面没有的，需要通过计算得来。
我个人这样理解，计算属性的名称相当于一个变量可以直接在html中使用。当然，是变量那一定就有值（这里的值打引号，也可以是字符串），所以在计算属性使用了各种计算方法后，就必须返回一个值。
totalPrice() {
let total = 0;
this.selectFoods.forEach((food) => {
total += food.price * food.count;
});
return total;
},
totalCount() {
let count = 0;
this.selectFoods.forEach((food) => {
count += food.count;
});
return count;
},
payDesc() {
if (this.totalPrice=== 0) {
return `￥${this.minPrice}元起送`;
} else if(this.totalPrice<this.minPrice) {
let deff = this.minPrice-this.totalPrice;
return `还差￥${diff}元起送`;
} else {
return '去结算';
}
let pay = 0;
this.selectFoods.forEach()
}
动态判断绑定
<div class="num" v-show="totalCount>0">{{totalCount}}</div>
<div class="price" :class="{'highlight':totalPrice>0}">￥{{totalPrice}}元</div>
在vue的v-命令中，大都可以添加判断
效果
image.png
image.png
vue的优点就是不用通过jquery去操作dom的那么多样式。而是通过v-的命令结合js一些方法，改变数据直接就可以看到样式的改变。与数据联系紧密
