Как вы можете получить символ валюты от vue-i18n

Я хотел бы отображать символ валюты в зависимости от локали

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

Я хотел бы показать

    <p>Every $ you invest</p>

или же

    <p>Every £ you invest</p>

ЭСТ...

и есть способ показать имя, а также:

    <p>Every dollar you invest</p>
Источник

4 ответа

Сохранить символ валюты в сообщениях переводов

Настройка VueI18n

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

export default new VueI18n({
    messages
})

компонент html

<p>{{ $t('currencySymbol') }}</p>
Источник

Я знаю, что он не использует 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.
Источник

Ваш ответ здесь: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>
Источник

Вот хакерская техника, которую можно использовать в вашем шаблоне:

          <i18n-n tag="span" :value="0" :format="{ key: 'currency', currency: 'USD' }">
        <template #currency="slotProps">
            <span>{{ slotProps.currency }}</span>
        </template>
        <template #integer="slotProps">
            <span style="display:none">{{ slotProps.integer }}</span>
        </template>
        <template #group="slotProps">
            <span style="display:none">{{ slotProps.group }}</span>
        </template>
        <template #decimal="slotProps">
            <span style="display:none">{{ slotProps.decimal }}</span>
        </template>
        <template #fraction="slotProps">
            <span style="display:none">{{ slotProps.fraction }}</span>
        </template>
    </i18n-n>

Задокументировано здесь . Я считаю, что это отвечает на вопрос ОП о том, как отображать символ валюты только с помощью vue-i18n.

Источник
Другие вопросы по тегам