vue.js - Decimal Formatting in Vue Framework

Question

I am new to Vue Framework. My requirement is to add money currency formatting in an input box.

Formatting:
I need to add a decimal with two zeros on focus out and remove zero at focus in. The v-modal value should not change as this format is just for the user display.

I found this solution which is quite close to my requirement: https://jsfiddle.net/mani04/w6oo9b6j. There are just two additional things I am not able to implement.

I want to use it like:

<my-currency-input id="test1" name="test2" v-model="price" v-validate="required|numeric” ></my-currency-input>

1. I have added vee-validate.js lib for validation for my whole form. So how can I use v-validate in this example?
2. I don't want to round off my string. We just need to add and remove (.00) Here, if user enters 35.7896 it is making it 35.79. For my requirement, it should remain 35.7896 as it is already having decimal. It should only add decimal when user enter a number.

How can I do this? Should I use Vue directive for this?

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

Something like this I want

<my-currency-input id="test1" name="test2" v-model="price" v-validate="required|numeric” ></my-currency-input>

标签： vue.jsvue-componentvue-directives

Answer 1

我认为你可以使用{{ parseFloat.($variable).toFixed(2) }}, is simple 对于 vue.js 的十进制数。你可以试试这个。