vue货币过滤器的实现方法

发布时间：2020-12-17 03:00:53 所属栏目：百科来源：网络整理

导读：自定义事件也可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。所以要让组件的 v-model 生效，它必须：接受一个 value 属性在有新的 value 时触发 input 事件代码如下： HTML： {{ message }} currency-input label="Price" v-model

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

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

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

代码如下：

HTML：

<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 }}

JavaScript：

`,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实现双向传递。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!