Vue 框架中的十进制格式

Posted 2023-02-22

【中文标题】Vue 框架中的十进制格式

【英文标题】：Decimal Formatting in Vue Framework

【发布时间】：2019-09-24 05:43:51

【问题描述】：

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

格式： 我需要在焦点外添加一个带两个零的小数，并在焦点内删除零。v-modal 值不应更改，因为此格式仅用于用户显示。

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

我想像这样使用它：

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

我添加了 vee-validate.js 库来验证我的整个表单。那么在这个例子中如何使用 v-validate 呢？ 我不想修整我的字符串。我们只需要添加和删除 (.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>

【问题讨论】：

您可以做的最简单的事情是使用“干净”值创建一个隐藏的输入字段，并将显示的输入字段格式化为您想要的格式。因此，您可以控制传递给应用程序的数据（使用隐藏字段），并且您可以完全控制向用户显示的数据（使用显示字段）。

感谢格式化部分的建议。我正在寻找有关如何在给定场景中使用 v-validate 的信息。

【参考方案1】：

您不需要焦点外/焦点内的方法。你需要的是一个计算出来的property。 试试这个：

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'
);

【讨论】：

这是在输入框外打印格式化的值。我需要在使用焦点时在文本框中显示小数点为零，并在用户焦点进入时删除它们。所以我的小提琴中的解决方案是正确的.唯一的问题是我现在无法使用 v-validate。我将其用于表单的所有输入。

【参考方案2】：

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

【讨论】：

嗨，陶菲克。感谢您的回答，欢迎来到 Stack Overflow。考虑使用反引号 (`) 来提高答案的可读性或考虑使用代码块（双换行符和四个空格缩进）。