vuejs 货币输入掩码键盘

Question

我正在使用以下代码通过 vue js 输入价格，但它没有给出我想要的输出。 我想从键盘键（POINT）中取消。只有逗号会起作用。顺便说一句，我是你们中的新人，如果您能相应地帮助我，我会很高兴。

示例： 0,00 1.000,00

Code

Vue.component('my-currency-input', {
    template: `
        <div>
            <input type="text" v-model="formattedCurrencyValue" @blur="focusOut"/>
        </div>`,
    data: function() {
        return {
            currencyValue: 0,
            formattedCurrencyValue: "0.00"
        }
    },
    methods: {
        focusOut: function() {
            // Recalculate the currencyValue after ignoring "$" and "," in user input
            this.currencyValue = parseFloat(this.formattedCurrencyValue.replace(/[^\d\.]/g, ""))
            // Ensure that it is not NaN. If so, initialize it to zero.
            // This happens if user provides a blank input or non-numeric input like "abc"
            if (isNaN(this.currencyValue)) {
                this.currencyValue = 0
            }
                        // Format display value based on calculated currencyValue
            this.formattedCurrencyValue = this.currencyValue.toFixed(2).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
        },
    }
});

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

Answer 1

您可以通过keydown 事件取消密钥。检查罐头并防止事件发生。我在这里创建了一个示例：https://jsfiddle.net/4ejrfhyp/7/。