vue货币过滤器的实现方法

这篇文章主要为大家详细介绍了vue货币过滤器的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

自定义事件也可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。

所以要让组件的 v-model 生效，它必须：

• 接受一个 value 属性
• 在有新的 value 时触发 input 事件

代码如下：

HTML：

  
{{ message }}
Total: ${{ total }}

JavaScript：

 Vue.component('currency-input', { template: `\ \ {{ label }}\ $\ \ \ `, 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) } } }) 

效果图如下：

每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

v-model实现双向传递。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

以上就是vue货币过滤器的实现方法的详细内容，更多请关注本站其它相关文章！