vue.js - 如何从 vue-i18n 获取货币符号

Question

我想根据语言环境显示货币符号

    <p>Every {{ $n(null, 'currency') }} you invest</p>

我想显示

    <p>Every $ you invest</p>

或者

    <p>Every £ you invest</p>

等等...

并有一种方法来显示名称：

    <p>Every dollar you invest</p>    

Answer 1

在翻译消息中保存货币符号

VueI18n 设置

const messages = {
    "en-GB": { currencySymbol: "£" },
    "en-US": { currencySymbol: "$" }
}

export default new VueI18n({
    messages
})

组件 html

<p>{{ $t('currencySymbol') }}</p>

Answer 2

我知道它没有使用vue-i18n，但您可以使用内置的es5 Intl 库：

let formatter = new Intl.NumberFormat('en-GB', {
  style: 'currency',
  currency: 'GBP',
  minimumFractionDigits: 2
})
return formatter.format('0')[0] // Would return the first digit which is the currency symbol.

Answer 3

你的答案在这里： https ://kazupon.github.io/vue-i18n/guide/number.html#custom-formatting

const numberFormats = {
  'en-US': {
    currency: {
      style: 'currency',
      currency: 'USD'
    }
  },
  'ja-JP': {
    currency: {
      style: 'currency',
      currency: 'JPY',
      currencyDisplay: 'symbol'
    }
  }
}

const i18n = new VueI18n({
  numberFormats
})

new Vue({
  i18n
}).$mount('#app')

模板如下：

<div id="app">
      <p>{{ $n(100, 'currency') }}</p>
      <p>{{ $n(100, 'currency', 'ja-JP') }}</p>
</div>

输出以下内容：

<div id="app">
  <p>$100.00</p>
  <p>￥100</p>
</div>