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

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

我试过vue指令。由于其他控件而刷新UI时，不调用指令的更新方法。因此，textbox中的值将恢复为不带任何格式的值

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

那么，现在Vue 2.0中的标准格式是什么

---

以下是一个工作示例：

它的工作原理是在焦点输出和焦点输入事件期间修改输入字符串（您的货币值），如下所示：

当您将光标放在输入框中时，它会接受

this.currencyValue

并将其转换为普通格式，以便用户可以修改它

用户键入值并单击其他位置（焦点向外）后，

此.currencyValue

将在忽略非数字字符后重新计算，并根据需要格式化显示文本

货币格式化程序（reg exp）是此处的复制粘贴：

---

如果您不想要前面提到的小数点，可以在

focusOut

方法中执行

this.currencyValue.toFixed（0）

。

请检查此工作JSFIDLE示例：

在本例中，格式化的货币输入本身就是一个组件，它与Vue.js中的任何其他表单元素一样使用

v-model

。您可以按如下方式初始化此组件：

my currency input

是一个自包含的组件，当输入框处于非活动状态时，它会格式化货币值。当用户将光标放入其中时，格式将被删除，以便用户可以轻松地修改值

以下是它的工作原理：

my currency input

组件有一个计算值-

displayValue

，它定义了

get

和

set

方法。在

get

方法中，如果输入框未激活，则返回格式化的货币值

当用户在输入框中键入时，

displayValue

computed属性的

set

方法使用

$emit

发出值，从而将此更改通知父组件

---

关于在自定义组件上使用

v-model

的参考：

我实现了一个组件。根据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.component（'currency'{
模板：'使用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;
    };
  }
});

以下是示例链接：
这是我见过的唯一一种理智、不烦人的输入掩码方法。谢谢，我希望有一个更接近Vue体系结构的解决方案。我尝试过使用计算属性（丑陋的解决方案，我必须为每个货币输入添加一个计算属性）。现在，当用户键入“1111”（字符串）时，模型值为1111（数字）。然后用户在“1111”之后输入“.22”，setter删除了小数点。但是输入文本框是1111.22，因为模型值仍然是1111，并且不会调用getter。我为这个问题添加了另一个答案。因为它涉及到对JSFIDLE示例的完全重写，所以我决定添加一个单独的答案，而不是编辑这个答案。请查看它是否满足您的要求。我使用了计算的属性。小数在内部处理，而显示仅显示在
toFixed（）中指定的精度
在格式化货币时。@BillCriswell谢谢！甚至我也比我的其他示例更喜欢这个，因为它是一个完全独立的组件，并且父模板是干净的。我喜欢你的方法，所以我对它进行了一些扩展：谢谢@BillCriswell，你的示例看起来非常干净！我不知道toLocaleString，它可以处理以下情况：点用于数字分隔符，逗号用于小数。这比使用复制粘贴的正则表达式要好得多，我还没有解释它是如何工作的。另外，将掩码指定为单独的输入非常棒！这将允许使用其他类型的输入格式，如日期格式化程序、非美元货币类型等。感谢您为此花费时间，我将使用您的JSFIDLE来构建我的通用可重用输入组件：）这非常好，谢谢，我已经将它用于增强的输入组件。我不得不添加一个稍微混乱的代码，使它能够按照我对货币字段的要求工作，即将实际值截断或四舍五入到小数点后两位（而不是这样显示）。我添加了一个@change处理程序，它对值调用toFixed（2）。不过，我想知道是否可以在unmask方法中更灵活地处理这一问题？我不得不说，我找不到方法。说得好。我现在在toFixed之后使用parseFloat，这解决了问题。