Vue.js 如何对我打印的值求和

Question

我在商业网站上工作，当客户订购产品时，我会执行以下操作： 首先打印产品的价格，例如 $60 然后如果客户选择快速运输服务，我打印快递服务的价值，例如，20 美元。 如何在 Total 中添加和打印数字？

<ul>
    <li>Price : {{product.product_price}} Doller</li>
    <li v-if="orderData.fastDelivry">Fast delivry : {{delevryValue}} Doller</li>
    <li>Total : </li>
</ul>

Answer 1

尝试如下 sn-p:

new Vue({
  el: '#demo',
  data() {
    return {
      product: {
        name: 'prod 1',
        product_price: 15
      },
      orderData: {
        fastDelivry: false
      },
      delevryValue: 5
    }
  },
  computed: {
    total() {
      return (this.orderData.fastDelivry ? this.product.product_price + this.delevryValue :  this.product.product_price)
    }
  },
  methods: {
    setDelivery() {
      this.orderData.fastDelivry = !this.orderData.fastDelivry
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<ul>
    <li>Price : {{product.product_price}} Doller</li>
    <input type="checkbox" @click="setDelivery" /> fast delivery 
    <li v-if="orderData.fastDelivry">Fast delivry : {{delevryValue}} Doller</li>
    <li>Total : {{ total }}</li>
</ul>
</div>