Vue.filter('currency', {
read: function (value) {
return '$' + value.toFixed(2)
},
write: function (value) {
var number = +value.replace(/[^\d.]/g, '')
return isNaN(number) ? 0 : number
}
})
new Vue({
el: '#app',
data: {
price: 0,
shipping: 0,
handling: 0,
discount: 0,
},
computed: {
total: function () {
return (
this.price +
this.shipping +
this.handling -
this.discount
)
}
}
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
<div>
<label>Price</label>
<input v-model="price | currency">
</div>
<div>
<label>Shipping</label>
<input v-model="shipping | currency">
</div>
<div>
<label>Handling</label>
<input v-model="handling | currency">
</div>
<div>
<label>Discount</label>
<input v-model="discount | currency">
</div>
<p>Total: ${{ total }}</p>
</div>