<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{ $t("one.index", { mag: "我的"}) }}</p>
</div>
</body>
<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-i18n@9.2.2/dist/vue-i18n.global.js"></script>
<script>
const i18n = VueI18n.createI18n({
// new VueI18n() 可以对Vue 容器进行全局配置也可以, 只在当前组件容器中进行配置
// locale 和 messages 字段也是固定的, 只有 messages 内部的字段是自定义的
locale: "cn",
messages: {
cn: {
one: {
// 这是 "具名格式", 直接通过属性名, 来进行引用
// HTML 示例: <p>{{ $t("one.index", { mag: "我的"}) }}</p>
index: "你好 {mag} 世界", // {mag} 从 $t() 函数调用时获取指定的变量,
},
},
en: {
one: {
// 这是利用数组参数, 来形成的 "列表格式"
// HTML 示例: <p>{{ $t("one.index", ["我的"]) }}</p>
index: "hello {0} world", // {0} 从 $t() 函数调用时获取指定的变量
},
},
ja: {
one: {
// 这是复数形式, 函数也从 $t() 变成了 $tc()
// HTML 示例: <p>{{ $tc("one.index", 1) }}</p> 结果: 这是我的世界
index: "こんにちは、 世界 | 这是我的世界 | 这是你的世界", // {mag} 从 $tc() 函数调用时获取指定的变量
},
},
jw: {
one: {
// 这是复数形式和具名格式的组合使用, 函数也从 $t() 变成了 $tc()
// HTML 示例: <p>{{ $tc("one.index", 2, {mas: "这是"}) }}</p> 结果: 这是你的世界
index: "こんにちは、{mas} 世界 | 这是我的世界 | {mas}你的世界", // {mag} 从 $tc() 函数调用时获取指定的变量
},
},
},
});
const app = Vue.createApp({
data() {
return {};
},
});
app.use(i18n);
app.mount("#app");
</script>
</html>
$te(key, locale) 使用指定的 locale 语言库
06-02
1203
1203
07-03
5360
5360
04-23
1201
1201
07-23
2万+
2万+
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
