基本用法
首先，确保你已经正确安装并配置了 vue-i18n：
安装
npm install vue-i18n
配置 Vue-i18n
在你的 Vue 项目中配置 vue-i18n。以下是一个简单的示例：
在en.js文件内里：
{
greeting: "Hello, {name}! Welcome to {company}.",
message_with_count: "{count} new messages.",
plural_message: "{count, plural, one{# message} other{# messages}}"
},
在zh.js文件内里
{
greeting: "你好，{name}！欢迎来到 {company}。",
message_with_count: "有 {count} 条新消息。",
plural_message: "{count, plural, one{# 条消息} other{# 条消息}}"
}
利用 $t 方法
$t(key: string, values?: VueI18n.Values): string
- key: 国际化字符串的键值。
- values: 包含变量的对象，用于更换国际化字符串中的占位符。
假设你有一个组件，并且想要在模板中利用 $t 方法来处理包含变量的字符串：
<template>
<div>
<p>{{ $t('greeting', { name: '张三', company: 'ABC公司' }) }}</p>
<p>{{ $t('message_with_count', { count: messageCount }) }}</p>
<p>{{ $t('plural_message', { count: messageCount }) }}</p>
</div>
</template>
<script>
export default {
data() {
return {
messageCount: 5
};
}
};
</script>
输出
<div>
<p>你好，张三！欢迎来到 ABC公司。</p>
<p>有 5 条新消息。</p>
<p>5 条消息</p>
</div>
复数处理
vue-i18n 支持复数形式的国际化字符串。你可以利用 plural 关键字来处理差别的数量形式。
在en.js文件内里：
{
plural_message: "{count, plural, one{# message} other{# messages}}"
},
在zh.js文件内里
{
plural_message: "{count, plural, one{# 条消息} other{# 条消息}}"
}
在模板中利用：
<template>
<div>
<p>{{ $t('plural_message', { count: 1 }) }}</p>
<p>{{ $t('plural_message', { count: 2 }) }}</p>
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
输出
当 locale 设置为 'zh' 时，输出如下：
<div>
<p>1 条消息</p>
<p>2 条消息</p>
</div>
格式化数字和其他类型
除了字符串更换，vue-i18n 还支持格式化数字、日期等。
const messages = {
在en.js文件内里：
{
formatted_number: "The price is {price, number} dollars.",
formatted_date: "Today's date is {date, date}."
},
在zh.js文件内里：
{
formatted_number: "价格是 {price, number} 美元。",
formatted_date: "今天的日期是 {date, date}。"
}
};
在模板中利用：
<template>
<div>
<p>{{ $t('formatted_number', { price: 1234.56 }) }}</p>
<p>{{ $t('formatted_date', { date: new Date() }) }}</p>
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
输出
当 locale 设置为 'zh' 时，输出如下：
<div>
<p>价格是 1,234.56 美元。</p>
<p>今天的日期是 2023年10月10日。</p>
</div>
总结
$t 方法是 vue-i18n 中用于获取和更换国际化字符串的核心方法。通过转达键值和包含变量的对象，可以轻松处理包含变量的国际化字符串。连合复数形式、数字格式化等功能，可以实现更复杂的国际化需求。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
