在 Vue 组件中格式化货币？

Question

大家好，我正在尝试格式化 JSON 给我带来的货币价值，我看到了一些建议，但我仍然无法转换价值。这就是我的代码结构

<template>
...
<div class="currency-selection">
   <input type="text" :value="conversionValue * cryptoQuantity " readonly />
...
<template>

<script>

export default {
    name: 'CurrencySelect',
    data: () => ({
        conversionValue: 0,
        cryptoQuantity: 1
}),
axios
            .get(
                "https://min-api.cryptocompare.com/data/price?fsym=btc&tsyms=COP"
            )
            .then((res) => {
                this.conversionValue = res.data.COP;
            })
            .catch((e) => {
                console.log(e);
            });
}

现在的值为 169057977.17 但我希望它显示如下：169.057.977,17

Answer 1

您可以使用 toLocaleString 根据您定义的语言和区域设置数字格式。

使用Number.toLocaleString('es-CO')得到这个：169.057.977,17

请参阅 this 以获取支持的语言环境列表

See this example

<script>
export default {
  data() {
    return {
      conversionValue: 0,
      cryptoQuantity: 1
    }
  },
  async mounted () {
    this.conversionValue = await fetch("https://min-api.cryptocompare.com/data/price?fsym=btc&tsyms=COP").then(raw => raw.json()).then(json => json.COP)
  }
}
</script>

<template>
<input type="text" :value="(this.cryptoQuantity * this.conversionValue).toLocaleString('es-CO')"/>
</template>

在 Vue 组件中格式化货币？

format currencies in a Vue component?

html

arrays

json

vue.js

vue-component