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

Question

I work on a commercial site and when the customer orders a product, I do the following: Printing the price of the product first for example $ 60 Then if the customer chooses the fast shipping service, I print the value of the express shipping service, for example, $20. How do I addition and print numbers in 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

Try like following snippet:

 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>