Trabajo en un sitio comercial y cuando el cliente ordena un producto hago lo siguiente: Imprimo primero el precio del producto por ejemplo $60 Luego si el cliente elige el servicio de envío rápido, imprimo el valor del servicio de envío express, por ejemplo, $20. ¿Cómo sumo e imprimo números en total?
<ul> <li>Price : {{product.product_price}} Doller</li> <li v-if="orderData.fastDelivry">Fast delivry : {{delevryValue}} Doller</li> <li>Total : </li> </ul>Prueba como el siguiente fragmento:
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>