购物车组件开发(慕课e了么实战)

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

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