在Vue.js 2.0中的v模型上实施格式化的正确方法是什么

请检查此工作的jsFiddle示例：https ://jsfiddle.net/mani04/bgzhw68m/

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

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

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

下面是它的工作原理：

The my-currency-input component has a computed value - displayValue, which has get and set methods defined. In the get method, if input box is not active, it returns formatted currency value.

When user types into the input box, the set method of displayValue computed property emits the value using $emit, thus notifying parent component about this change.

Reference for using v-model on custom components: https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

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

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

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

1. 当您将光标放在输入框中时，它将采用this.currencyValue并将其转换为纯格式，以便用户可以对其进行修改。

2. 用户键入该值并单击其他位置（焦点移出）后，this.currencyValue在忽略非数字字符后将重新计算，并按要求设置显示文本的格式。

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

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