Vue实现简单的购物车案例

<template>  <div>    <div>      <span>手机: </span>      <span>价格</span> <input type="number" v-model.number="phonePrice">      <span> 数量 </span><input type="number" v-model.number="phoneCount">      <span> 小计: </span><span>{{phoneTotal}}元</span>    </div>    <div>      <span>电脑: </span>      <span>价格</span> <input type="number" v-model.number="computerPrice">      <span> 数量 </span><input type="number" v-model.number="computerCount">      <span> 小计: </span><span>{{computerTotal}}元</span>    </div>    <div>      <span>运费: </span><input type="number" v-model.number="freight"><span>元</span><br>      <span>共计: {{total}}元</span>      <p>优惠: {{discounts}}元</p>      <p>应付: {{allPrice}}</p>    </div>  </div></template><script>export default {  data () {    return {      phonePrice: '', // 手机单价      phoneCount: '', // 手机数量      computerPrice: '', // 电脑单价      computerCount: '', // 电脑数量      freight: '', // 运费      discounts: ''    }  },  computed: {    phoneTotal () {      return this.phonePrice * this.phoneCount    },    computerTotal () {      return this.computerPrice * this.computerCount    },    // 总价    total () {      return this.computerTotal + this.phoneTotal + this.freight    },    allPrice () {      return this.total - this.discounts    }  },  watch: {    total: {      depp: true,      handler () {        if (this.phoneTotal + this.computerTotal > 5000 && this.phoneTotal + this.computerTotal < 8000) {          this.discounts = 100        } else if (this.phoneTotal + this.computerTotal > 8000) {          this.discounts = 200        }      }    }  }}</script><style scoped lang='less'></style>