[JavaScript知识库]用vue写一个简单的购物车案例

首先看一下案例需求：

下面是实现需求的具体代码：

个人建议使用v-model双向数据绑定，然后在用computed 计算属性 进行计算

<template>
  <div class="shop_main">
    <h3>案例：购物车结算</h3>
    <div>
      <span>手机：价格 </span>
      <input type="text" v-model.number="shopNum" />
      <span>数量：</span>
      <input type="text" v-model.number="phoneCount" />
      <span>小计{{ shopNum }}</span>
    </div>
    <div>
      <span>电脑：价格</span>
      <input type="text" v-model.number="comNum" />
      数量：<input type="text" v-model.number="comCount" />
      <span> 小计{{ comSum }}元</span><br />
      运费：<input type="text" v-model.number="freight" />元
    </div>
    <div>
      共计:<span>{{ getSum }}</span
      >元 <br />
      优惠:<span>{{ disCount }}</span
      >元 <br />
      应付:<span>{{ price }}</span
      >元 <br />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shopNum: 2989,
      phoneCount: 1,
      comNum: 6000,
      comCount: 1,
      freight: 10,
    };
  },
  computed: {
    // 手机小计
    phoneSum() {
      return this.shopNum * this.phoneCount;
    },
    // 电脑小计
    comSum() {
      return this.comNum * this.comCount;
    },
    // 总金额
    getSum() {
      return this.shopNum + this.comSum + this.freight;
    },
    // 优惠金额
    disCount() {
      return this.getSum > 8000 ? 200 : 100;
    },
    // 应付金额
    price() {
      return this.getSum - this.disCount;
    },
  },
};
</script>

<style scoped>
.shop_main {
  font-weight: 700;
}
h3 {
  text-align: center;
}
input {
  width: 80px;
}
</style>

下面是效果图：

?