拿vue练手-购物车结算demo

效果图

代码实现

<template>
  <div>
    <h1>购物车结算</h1>
    <br />
    <table>
      <tr>
        <td>手机：</td>
        <td>
          价格：
          <input type="text" v-model.number="phone" />
        </td>
        <td>
          数量：
          <input type="text" v-model.number="count1" />
        </td>
        <td>小计：{{sum1}}</td>
      </tr>
      <tr>
        <td>电脑：</td>
        <td>
          价格：
          <input type="text" v-model.number="host" />
        </td>
        <td>
          数量：
          <input type="text" v-model.number="count2" />
        </td>
        <td>小计：{{sum2}}</td>
      </tr>
    </table>
    <div>
      <div>
        运费：
        <input type="text" style="width:100px" v-model.number="freight" />元
      </div>
      <div>共计：{{sum1+sum2+freight}}元</div>
      <div>优惠：{{discounts}}元</div>
      <div>应付：{{total}}元</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: 5199,
      host: 7999,
      count1: 1,
      count2: 2,
      freight: 10
    };
  },
  computed: {
    sum1() {
      return this.phone * this.count1;
    },
    sum2() {
      return this.host * this.count2;
    },
    total() {
      const num = this.sum1 + this.sum2;
      if (num > 8000) {
        return num + this.freight - 200;
      } else if (num > 5000) {
        return num + this.freight - 100;
      } else {
        return num + this.freight;
      }
    },
    discounts() {
      const a = this.sum1 + this.sum2;
      if(a >8000){
        return 200
      }else if(a>5000){
        return 100
      }else{
        return 0
      }
    }
  }
};
</script>