举个简单的例子：输入货币数据的文本框。 要求是以“$1,234,567”格式显示用户输入并删除小数点。
我已经尝试过 vue 指令。由于其他控件而刷新 UI 时，不会调用指令的 update 方法。因此文本框中的值恢复为没有任何格式的值。
我还尝试了 v-on:change 事件处理程序。但我不知道如何在事件处理程序中调用全局函数。在每个 Vue 对象中创建货币转换方法并不是一个好习惯。
那么现在 Vue 2.0 中的标准格式化方式是什么？
问候
【问题讨论】：
标签： vue.js
请检查这个有效的 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://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"/>
当你将光标放在输入框内时，它会将this.currencyValue转换为纯格式，以便用户修改。
用户输入值并点击其他地方（焦点外）后，this.currencyValue在忽略非数字字符后重新计算，显示文本按要求格式化。
货币格式化程序（reg exp）是从这里复制粘贴的：How can I format numbers as money in JavaScript?
如果你不想要你提到的小数点，你可以在focusOut方法中做this.currencyValue.toFixed(0)。
【讨论】：
toFixed() 中指定的任何精度。
我实现了一个组件。根据 Mani 的回答，它应该使用 $emit。
Vue.component('currency', {
template: '<input type="text"' +
' class="form-control"' +
' :placeholder="placeholder""' +
' :title="title"' +
' v-model="formatted" />',
props: ['placeholder', 'title', 'value'],
computed: {
formatted: {
get: function () {
var value = this.value;
var formatted = currencyFilter(value, "", 0);
return formatted;
},
set: function (newValue) {
var cleanValue = newValue.replace(",", "");
var intValue = parseInt(cleanValue, 10);
this.value = 0;
this.value = intValue;
}
}
}
}
);
【讨论】：
使用 Vue 自定义指令 + .toLocaleString() 也是一个很好的选择。
Vue.directive("currency", {
bind(el, binding, vnode) {
el.value = binding.value && Number(binding.value).toLocaleString('en-US', {style: 'currency', currency: !binding.arg ? 'USD' : binding.arg });
el.onblur = function(e) {
e.target.value = Number(e.target.value).toLocaleString('en-US', {style: 'currency', currency: !binding.arg ? 'USD' : binding.arg});
};
el.onfocus = function(e) {
e.target.value =
e.target.value && Number(e.target.value.replace(/[^\d.]/g, ""));
};
el.oninput = function(e) {
vnode.context.$data[binding.expression] = e.target.value;
};
}
});
【讨论】：