举个简单的例子:输入货币数据的文本框。 要求是以“$1,234,567”格式显示用户输入并删除小数点。
我试过 vue 指令。当 UI 由于其他控件而刷新时，不会调用指令的更新方法。因此文本框中的值恢复为没有任何格式的值。
我还尝试了 v-on:change 事件处理程序。但我不知道如何在事件处理程序中调用全局函数。在每个 Vue 对象中创建一个货币转换方法不是一个好习惯。
那么现在 Vue 2.0 中格式化的标准方式是什么？
问候
最佳答案
请检查这个有效的 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
关于vue.js - 在 Vue.js 2.0 中对 v-model 进行格式化的正确方法是什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41112733/