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

Question

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

我已经尝试过 vue 指令。由于其他控件而刷新 UI 时，不会调用指令的 update 方法。因此文本框中的值会恢复为没有任何格式的值。

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

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

问候

原文由 flyfrog 发布，翻译遵循 CC BY-SA 4.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 方法中，如果输入框未激活，则返回格式化的货币值。

当用户在输入框中输入内容时， displayValue 计算属性的 set 方法使用 $emit 发出值，从而通知父组件有关此更改。

在自定义组件上使用 v-model 的参考： https ://v2.vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

原文由 Mani 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个工作示例： https ://jsfiddle.net/mani04/w6oo9b6j/

它通过在聚焦和聚焦事件期间修改输入字符串（您的货币值）来工作，如下所示：

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

1. 当您将光标放在输入框内时，它将 this.currencyValue 转换为纯格式，以便用户修改。

2. 用户键入值并在别处点击后（焦点出），忽略非数字字符后重新计算 this.currencyValue ，并按要求格式化显示文本。

货币格式化程序（reg exp）是从这里复制粘贴： 如何在 JavaScript 中将数字格式化为货币？

如果您不想要您提到的小数点，您可以在 focusOut 方法中执行 this.currencyValue.toFixed(0) 。

原文由 Mani 发布，翻译遵循 CC BY-SA 3.0 许可协议