vue-i18n更多用法

复数

要本地化消息，您可能需要支持某些语言的复数形式。

Vue i18n 支持复数，您可以使用具有复数功能的翻译 API。

基本用法

您需要定义具有管道 | 的区域设置消息。分隔符并在管道分隔符中定义复数。
Vue I18n 提供$tc方式来使用复数。

提示
一些支持复数的写法：

• $tc(适用于旧版API模式)
• v-t自定义指令
• 内置翻译组件(i18n-t)
• 从useI18n导出t(对于组合API模式)
• 注入全局$t(对于组合API模式)

对于复数，不需要明确给出复数形式的数字。
可以通过预定义的命名参数 {count} 或 {n} 在区域设置消息中访问该数字。 如有必要，您可以覆盖这些预定义的命名参数。

注：使用复数的时候，消息源配置的顺序至关重要，请按从小到大的使用顺序从左到右书写

消息源配置

const messages = {
  en: {
    car: 'car | cars',
    apple: 'no apples | one apple | {count} apples',
    banana: 'no bananas | {n} banana | {n} bananas'
  }
}

引用

<p>{{ $tc('car', 1) }}</p>
<p>{{ $tc('car', 2) }}</p>

<p>{{ $tc('apple', 0) }}</p>
<p>{{ $tc('apple', 1) }}</p>
<p>{{ $tc('apple', 10, { count: 10 }) }}</p>

<p>{{ $tc('banana', 1, { n: 1 }) }}</p>
<p>{{ $tc('banana', 1) }}</p>
<p>{{ $tc('banana', 100, { n: 'too many' }) }}</p>

输出

<p>car</p>
<p>cars</p>

<p>no apples</p>
<p>one apple</p>
<p>10 apples</p>

<p>1 banana</p>
<p>1 banana</p>
<p>too many bananas</p>

定制复数化

部分语言的复数并不适用这种方式，对此可以进行定制，由于使用场景过少，这里不再展示，详情查看官方文档

时间日期

基本用法

您可以使用您定义的格式本地化日期时间。

消息源配置

const datetimeFormats = {
  'en-US': {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    },
    long: {
      year: 'numeric', month: 'short', day: 'numeric',
      weekday: 'short', hour: 'numeric', minute: 'numeric'
    }
  },
  'ja-JP': {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    },
    long: {
      year: 'numeric', month: 'short', day: 'numeric',
      weekday: 'short', hour: 'numeric', minute: 'numeric', hour12: true
    }
  }
}

可以进行配置的属性

属性	可选值
weekday（星期）	‘narrow’, ‘short’, ‘long’
era（公元）	‘narrow’, ‘short’, ‘long’
year（年）	‘2-digit’, ‘numeric’
month（月）	‘2-digit’, ‘numeric’, ‘narrow’, ‘short’, ‘long’
day（日）	‘2-digit’, ‘numeric’
hour（时）	‘2-digit’, ‘numeric’
minute（分）	‘2-digit’, ‘numeric’
second（秒）	‘2-digit’, ‘numeric’
timeZoneName（时区）	‘short’, ‘long’

进行以上配置后，需要在createI18n中添加datetimeFormats属性

const i18n = createI18n({
  datetimeFormats
})

可以使用$d对日期进行本地化

引用

<p>{{ $d(new Date(), 'short') }}</p>
<p>{{ $d(new Date(), 'long', 'ja-JP') }}</p>

输出

<p>Apr 19, 2017</p>
<p>2017年4月19日(水) 午前2:19</p>

数字格式

基本用法

您可以使用您的定义格式本地化该数字。

消息源配置

const numberFormats = {
  'en-US': {
    currency: {
      style: 'currency', currency: 'USD', notation: 'standard'
    },
    decimal: {
      style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2
    },
    percent: {
      style: 'percent', useGrouping: false
    }
  },
  'ja-JP': {
    currency: {
      style: 'currency', currency: 'JPY', useGrouping: true, currencyDisplay: 'symbol'
    },
    decimal: {
      style: 'decimal', minimumSignificantDigits: 3, maximumSignificantDigits: 5
    },
    percent: {
      style: 'percent', useGrouping: false
    }
  }
}

进行以上配置后，需要在createI18n中添加datetimeFormats属性

const i18n = createI18n({
  numberFormats
})

可以使用$n对数字进行本地化
如上，你可以指定具名的 (例如：currency 等) 的数字格式，并且需要使用ECMA-402 Intl.NumberFormat 的选项。

引用

<p>{{ $n(10000, 'currency') }}</p>
<p>{{ $n(10000, 'currency', 'ja-JP') }}</p>
<p>{{ $n(10000, 'currency', 'ja-JP', { useGrouping: false }) }}</p>
<p>{{ $n(987654321, 'currency', { notation: 'compact' }) }}</p>
<p>{{ $n(0.99123, 'percent') }}</p>
<p>{{ $n(0.99123, 'percent', { minimumFractionDigits: 2 }) }}</p>
<p>{{ $n(12.11612345, 'decimal') }}</p>
<p>{{ $n(12145281111, 'decimal', 'ja-JP') }}</p>

输出

<p>$10,000.00</p>
<p>￥10,000</p>
<p>￥10000</p>
<p>$988M</p>
<p>99%</p>
<p>99.12%</p>
<p>12.12</p>
<p>12,145,000,000</p>