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

嘗試像下面的片段：

 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>