Vue 框架中的十进制格式

Shi*_*ani 14 vue.js vue-component vue-directives

我是 Vue 框架的新手。我的要求是在输入框中添加货币格式。

\n\n

格式:
\n我需要在焦点移出时添加带有两个零的小数,并在焦点移入时删除零。 v-modal 值不应更改,因为此格式仅用于用户显示。

\n\n

我发现这个解决方案非常接近我的要求:https ://jsfiddle.net/mani04/w6oo9b6j 。只有两件事我无法实现。

\n\n

我想像这样使用它:

\n\n
<my-currency-input id="test1" name="test2" v-model="price" v-validate="required|numeric\xe2\x80\x9d ></my-currency-input>\n
Run Code Online (Sandbox Code Playgroud)\n\n
    \n
  1. 我添加了 vee-validate.js 库来验证整个表单。那么在这个例子中我该如何使用 v-validate 呢?
  2. \n
  3. 我不想修整我的弦。我们只需要添加和删除 (.00) \n这里,如果用户输入 35.7896,则将其变为 35.79。对于我的要求,它应该保留 35.7896,因为它已经有小数了。仅当用户输入数字时才添加小数点。
  4. \n
\n\n

我怎样才能做到这一点?我应该为此使用 Vue 指令吗?

\n\n

https://jsfiddle.net/mani04/w6oo9b6j/

\n\n

我想要这样的东西

\n\n
<my-currency-input id="test1" name="test2" v-model="price" v-validate="required|numeric\xe2\x80\x9d ></my-currency-input>\n
Run Code Online (Sandbox Code Playgroud)\n

小智 21

我想你可以使用 {{ parseFloat($variable).toFixed(2) }}

这是 vue.js 中使用的十进制数字的简单技巧


小智 6

methods: {
  formatNumber (num) {
    return parseFloat(num).toFixed(2)
  },
}
Run Code Online (Sandbox Code Playgroud)

在模板中

{{ formatNumber($variable) }} 
Run Code Online (Sandbox Code Playgroud)