数字本地化

支持版本

🆕 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> 属性的完整列表。