时间戳

首页 > 解决方案 > VueJS 数字格式在输入 Intl.NumberFormat 时以逗号分隔

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

问题描述

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

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

标签： javascriptvue.jsnumber-formatting

解决方案

抱歉，有点晚了。

这实际上是你想要实现的一个糟糕的 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>

推荐阅读