在Vue.js 2.0中在v-model上实现格式化的正确方法是什么

Question

举个简单的例子:文本框输入货币数据.要求是以"$ 1,234,567"格式显示用户输入并删除小数点.

我试过了vue指令.由于其他控件刷新UI时,不会调用指令的更新方法.因此,文本框中的值将恢复为没有任何格式的值.

我也试过v-on:更改事件处理程序.但我不知道如何在事件处理程序中调用全局函数.在每个Vue对象中创建货币转换方法不是一个好习惯.

那么现在Vue 2.0中标准的格式化方式是什么？

问候

Answer 1

请检查这个工作jsFiddle示例:https://jsfiddle.net/mani04/bgzhw68m/

在此示例中,格式化的货币输入本身就是一个组件,它v-model与Vue.js中的任何其他表单元素一样使用.您可以按如下方式初始化此组件:

<my-currency-input v-model="price"></my-currency-input>

my-currency-input是一个自包含组件,在输入框处于非活动状态时格式化货币值.当用户将光标放入其中时,格式化将被删除,以便用户可以舒适地修改该值.

下面是它的工作原理:

该my-currency-input组件具有计算值 - displayValue具有定义的方法get和set方法.在该get方法中,如果输入框未激活,则返回格式化的货币值.

当用户键入输入框时,计算属性的set方法displayValue将使用值发出值$emit,从而通知父组件有关此更改的信息.

我很喜欢你的方法,所以我对它进行了一些扩展:https://jsfiddle.net/crswll/xxuda425/5/ (2认同)
谢谢@BillCriswell，你的例子看起来很干净！我不知道 toLocaleString，它处理点用于数字分隔符和逗号用于十进制的情况。它比使用复制粘贴的正则表达式要好得多，我尚未对其工作原理进行解码。此外，将掩码指定为单独的输入非常棒！这将允许其他类型的输入格式，如日期格式化程序、非美元货币类型等。感谢您花时间在这上面，我将使用您的 jsFiddle 来构建我的通用可重用输入组件:) (2认同)

Answer 2

它的工作原理是在焦点输出和焦点事件期间修改输入字符串(您的货币值),如下所示:

<input type="text" v-model="formattedCurrencyValue" @blur="focusOut" @focus="focusIn"/>

货币格式化程序(reg exp)是这里的复制粘贴:如何在JavaScript中将数字格式化为货币？

如果您不想要提到的小数点,则可以this.currencyValue.toFixed(0)使用该focusOut方法.