输入 Intl.NumberFormat 时 VueJS 数字格式实时以逗号分隔

Posted 2023-04-13

【中文标题】输入 Intl.NumberFormat 时 VueJS 数字格式实时以逗号分隔

【英文标题】：VueJS Number Formats real time seperate by comma when Input Intl.NumberFormat

【发布时间】：2021-02-11 11:40:11

【问题描述】：

我是初学者，我想在插入数字输入的同时显示货币符号并使用逗号分隔。我按照我的理解写了这个。到目前为止还不好。有谁知道怎么做？谢谢

<template>
  <div id="app">
    <input
      type="text"
      id="cost"
      v-model="cost"
      @input="dd"
      name="cost"
      class="form-control form-control-md"
      placeholder="Enter cost of construction"
    />
  </div>
</template>

<script>
export default 
  name: "App",
  data() 
    return 
      cost: "",
    ;
  ,
  methods: 
    dd() 
      var number = this.cost;

      new Intl.NumberFormat("en-EN", 
        style: "currency",
        currency: "USD",
      ).format(number);

      return number;
    ,
  ,
;
</script>

【参考方案1】：

抱歉，有点晚了。

这实际上是你想要实现的一个糟糕的 5 分钟组合实现。那里有更好的解决方案，如果您开始使用它，您很快就会发现它的缺陷。

但它应该让你开始并帮助你了解它的要点。

new Vue(
  el: '#app',
  name: 'App',
  data() 
    return 
      cost: 0,
      formatLang: 'en-EN',
      formatStyle: 'currency',
      formatCurrency: 'USD'
    
  ,
  computed: 
    formatter() 
      return new Intl.NumberFormat(this.formatLang, 
        style: this.formatStyle,
        currency: this.formatCurrency
      )
    ,
    formattedCost() 
      return this.formatter.format(this.cost)
    
  
)

label 
  position: relative;


label input 
  position: absolute;
  width: 0;
  height: 0;
  border: none;
  outline: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <label @click="$refs.numberInput.focus()">
    <input ref="numberInput" type="number" v-model="cost" />
    <div class="formatted"> formattedCost </div>
  </label>
</div>

【参考方案2】：

我找到了一个方法。

  dd()
        
            if (this.cost != '') 
                var num = this.cost;
                
                

               num =  new Intl.NumberFormat('en-EN',  
                    style: 'currency',
                    currency: 'USD',
                    ).format(num);
                        
                this.cost = num;
            
        

现在输入后显示货币符号并使用逗号分隔。一个问题是编辑输入值时它显示NaN，否则它很好。告诉我是否有人知道如何解决该问题。提前致谢

【讨论】：

您的问题是您尝试再次使用格式化数字（字符串）作为数字。 Number('USD 123.45') 将返回 NaN，因为它无法将 'USD' 转换为数字。你需要2个变量。实际的num（例如this.numCost）和num的格式化字符串表示=>this.cost。然后你必须在Intl.NumberFormat中使用this.numCost

感谢您的回复。我确实明白了一些观点。之前的成本数据属性显示为 '10000' 但现在显示为 '$10000.00' 。所以它不能作为十进制值保存到数据库中。因为我将值分配给了 v-model。如果您有时间，请您通过编写代码向我解释一下。非常感谢