# 数字本地化

支持版本

🆕 7.0+ 新增

你可以使用你定义的格式来本地化数字。

数字格式如下:

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

如上,你可以指定具名的 (例如:currency 等) 的数字格式,并且需要使用 ECMA-402 Intl.NumberFormat 的选项 (opens new window)

之后就像语言环境信息一样,你需要指定 VueI18n 构造函数的 numberFormats 选项:

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>

# 自定义格式

支持版本

🆕 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="ja-JP"></i18n-n>
</div>

将产生以下输出:

<div id="app">
  <span>100</span>
  <span>$100.00</span>
  <span>¥100</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>

上面的模板将产生以下 HTML:

<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 以直接插入子节点,而无需创建根元素。

可以在 API 页面 中找到受支持的作用域插槽以及其他 <i18n-n> 属性的完整列表。