直接结合vue-i18n来使用，示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue-i18n</title>
</head>
<body>
<div id="app">
{{msg}}
<br /><br /> 语言选择：
<select v-model="selected" @change="changeLang()">
<option value="en">English</option>
<option value="zh">简体中文</option>
</select> Selected: {{selected}}
<br /><br />
<p>{{$t("message.hello")}}</p>
<ul>
<li v-for="(item, key) in items" :key="key">{{item.title}}</li>
</ul>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue-i18n.js"></script>
<script>
// 国际化内容配置
const messages = {
en: {
message: {
hello: "hello world",
li1: "li1",
li2: "li2",
li3: "li3",
},
},
zh: {
message: {
hello: "你好 世界",
li1: "标签一",
li2: "标签二",
li3: "标签三",
},
},
};
const i18n = new VueI18n({
locale: "en",
messages,
});
var app = new Vue({
el: "#app",
i18n,
data: {
msg: "Hello Vue i18n",
selected: "en",
},
computed: {
// 重点： vue 列表数据国际化处理，必须在 computed 中绑定
items: function () {
return [
{
title: this.$t("message.li1"), // 获取 i18n 配置数据
},
{
title: this.$t("message.li2"),
},
{
title: this.$t("message.li3"),
},
];
},
},
methods: {
// 切换语言配置
changeLang() {
i18n.locale = this.selected
},
},
});
</script>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
最新提问
有没有不依赖embedding向量的RAG技术？
有没有支持实时打断语音通话并后台帮你执行任何的ai模型？
开源ai大模型文件格式GGUF、MLX、Safetensors、 ONNX 有什么区别？
出海挣钱支付收款PayPal、Wise 、PingPong、Stripe如何选择？
如何实现类似google的图片隐形水印添加和识别技术？
linux上如何运行任意windows程序？
ai能写出比黑客还厉害的零日漏洞等攻击工具攻击任意软件系统工程？
js如何获取浏览器的音频上下文指纹、Canvas指纹、WebGL渲染特征？
为啥ai开始抛弃markdown文本，重新偏好html文本了？
网站有没有办法鉴别访问请求是由ai操控chrome-devtools-mcp发出的？
