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

Question

我是初学者，我想在插入数字输入的同时显示货币符号并使用逗号分隔。我按照我的理解写了这个。到现在都不好。任何人都知道如何？谢谢

<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>

Answer 1

找到方法了

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

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

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

Answer 2

抱歉，来晚了。

这实际上是一个蹩脚的 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>

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

VueJS Number Formats real time seperate by comma when Input Intl.NumberFormat

javascript

number-formatting

vue.js