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

动态判断绑定

    
     {
   {totalCount}}
    
    
     ￥{
   {totalPrice}}元
    

在vue的v-命令中，大都可以添加判断

效果

vue的优点就是不用通过jquery去操作dom的那么多样式。而是通过v-的命令结合js一些方法，改变数据直接就可以看到样式的改变。与数据联系紧密