Vue框架中的十进制格式

Question

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

格式：

我需要添加一个小数点，在焦点上加上两个零，然后在焦点移除零。V模式值不应更改，因为此格式仅供用户显示.

我找到了一个非常接近我的需求的解决方案：https://jsfiddle.net/mani04/w6oo9b6j。另外还有两件事我无法实现。

我想用它就像：

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

1. 我为我的整个表单添加了vee-valdate.jslib来进行验证。那么，在这个例子中，我如何使用v验证呢？
2. 我不想弄断我的绳子。我们只需要在这里添加和删除(.00)，如果用户输入35.7896，那么它就是35.79。对于我的要求，它应该保持35.7896，因为它已经有十进制。只有当用户输入一个数字时，它才应该添加十进制。

我该怎么做？我应该对此使用Vue指令吗？

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

就像我想要的那样

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

Answer 1

我认为您可以使用{{ parseFloat.($variable).toFixed(2) }}，对于vue.js的十进制数来说很简单。你可以试试这个。

Answer 2

methods: {
  formatNumber (num) {
    return parseFloat(num).toFixed(2)
  },
}

内模板

{{ formatNumber($variable) }} 

Answer 3

你不需要一个专注/专注的方法。您需要的是一个计算的属性。试试这个：

Vue.component('my-currency-input', {
    template: `
        <div>
            <input type="text" v-model="currencyValue" /> {{ formattedCurrencyValue }}
        </div>`,
    data: function() {
        return {
            currencyValue: 0,
            /* formattedCurrencyValue: "$ 0.00" */
        }
    },
    computed: {
        formattedCurrencyValue: function(){
        if(!this.currencyValue){ return "$0.00"}
            return "$" + parseFloat(this.currencyValue).toFixed(2)
        }
    }
});

new Vue({
    el: '#app'
});