前端之家收集整理的这篇文章主要介绍了
vue货币过滤器的实现方法，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
自定义事件也可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。
所以要让组件的 v-model 生效，它必须：
- 接受一个 value 属性
- 在有新的 value 时触发 input 事件
代码如下：
HTML：
{{ message }}
<currency-input label="Price" v-model="price">
<currency-input label="Shipping" v-model="shipping">
<currency-input label="Handling" v-model="handling">
<currency-input label="Discount" v-model="discount">
Total: ${{ total }}
\
`,props: {
value: {
type: Number,default: 0
},label: {
type: String,default: ''
}
},mounted: function () {
this.formatValue()
},methods: {
updateValue: function (value) {
var result = currencyValidator.parse(value,this.value)
if (result.warning) {
this.$refs.input.value = result.value
}
this.$emit('input',result.value)
},formatValue: function () {
this.$refs.input.value = currencyValidator.format(this.value)
},selectAll: function (event) {
setTimeout(function () {
event.target.select()
},0)
}
}
})
new Vue({
el: '#app',data: {
message: 'Hello Vue.js!',price: 0,shipping: 0,handling: 0,discount: 0
},computed: {
total: function () {
return ((
this.price * 100 +
this.shipping * 100 +
this.handling * 100 -
this.discount * 10
) / 100).toFixed(2)
}
}
})
