Vue I18n

# Локализация чисел

Поддержка с версии

🆕 7.0+

Можно выполнять локализацию чисел по соответствующему формату.

Пример формата для чисел:

const numberFormats = {
  'en-US': {
    currency: {
      style: 'currency',
      currency: 'USD'
    }
  },
  'ru-RU': {
    currency: {
      style: 'currency',
      currency: 'RUB',
      currencyDisplay: 'symbol'
    }
  }
}

Как указано выше, можно задать числовые форматы (например, currency для валюты) используя опции ECMA-402 Intl.NumberFormat (opens new window).

После этого, для возможности использования данного формата в сообщениях локализации, необходимо задать опцию numberFormats конструктора VueI18n:

const i18n = new VueI18n({
  numberFormats
})

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

Шаблон:

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

Результат:

<div id="app">
  <p>$100.00</p>
  <p>100,00 ₽</p>
</div>

# Пользовательское форматирование

Поддержка с версии

🆕 8.10+

Метод $n возвращает результат в виде строки с полностью отформатированным числом, которую можно использовать лишь целиком. В случаях, когда нужно стилизовать некоторую часть отформатированного числа (например, дробную часть), $n будет недостаточно. В таких случаях необходимо использовать функциональный компонент <i18n-n>.

При минимальном наборе свойств <i18n-n> генерирует тот же результат, что и $n обернутый в сконфигурированный DOM-элемент.

Шаблон:

<div id="app">
  <i18n-n :value="100"></i18n-n>
  <i18n-n :value="100" format="currency"></i18n-n>
  <i18n-n :value="100" format="currency" locale="ru-RU"></i18n-n>
</div>

Результат:

<div id="app">
  <span>100</span>
  <span>$100.00</span>
  <span>100,00 ₽</span>
</div>

Но по-настоящему оценить удобство компонента можно лишь тогда, когда он применяется с использованием слотов с ограниченной областью видимости (opens new window).

Допустим, есть требование выводить целую часть числа полужирным шрифтом. Реализовать это можно с помощью слота integer:

<i18n-n :value="100" format="currency">
  <span v-slot:integer="slotProps" styles="font-weight: bold">
    {{ slotProps.integer }}
  </span>
</i18n-n>

Результат:

<span>$<span styles="font-weight: bold">100</span>.00</span>

Можно использовать несколько слотов одновременно:

<i18n-n :value="1234" :format="{ key: 'currency', currency: 'EUR' }">
  <span v-slot:currency="slotProps" styles="color: green">
    {{ slotProps.currency }}
  </span>
  <span v-slot:integer="slotProps" styles="font-weight: bold">
    {{ slotProps.integer }}
  </span>
  <span v-slot:group="slotProps" styles="font-weight: bold">
    {{ slotProps.group }}
  </span>
  <span v-slot:fraction="slotProps" styles="font-size: small">
    {{ slotProps.fraction }}
  </span>
</i18n-n>

(Полученный HTML ниже отформатирован для лучшей читаемости)

<span>
  <span styles="color: green">€</span>
  <span styles="font-weight: bold">1</span>
  <span styles="font-weight: bold">,</span>
  <span styles="font-weight: bold">234</span>
  <span styles="font-size: small">00</span>
</span>

Определить тип корневого элемента можно указать с помощью входного параметра tag. Если входной параметр не указан, то по умолчанию будет 'span'. Также можно указать значение false, чтобы вставлять дочерние элементы без создания и оборачивания в корневой.

Полный список поддерживаемых слотов, а также другие свойства <i18n-n> можно найти на странице справочника API.

← Синтаксис сообщений локализации →