电脑xiao白，研究室要更新多语言主页。
之前研究室用的都是静态切换方式，中英文分开设置页面。更新内容太繁琐，英文界面就年久失修了。
这次我想设置一个动态切换方式。
理想环境是，设置一个全局函数，用来选择中文或者英文。在网页上弄一个语言切换开关。
然后针对需要多语言的词条，提供中文英文两种内容，依据全局函数来显示内容。（有些内容不需要多语言）
研究室主页更新的内容不多，之前看到过在网页文件目录下分别设置cn.json和en.json文件的方式，还是觉得太麻烦了。
最好就是，每次更新的时候，都只在同一网页文件上更新。
比如今天发生了一件事，我要添加的内容只有：
（cn） 10月9号，今天老板吃了好多饭。
（en） Oct 9th, my boss ate too much today.
然后根据选择的语言显示相应内容。
还有就是主页有不同的Tab，人员、研究课题介绍等等。这些页面文件相互独立。
需要在切换不同Tab的时候，保持选择的语言环境。
比如主页选了英文环境，这时候点击"Member"，希望跳转的"Member"页面仍然是英文，而不是中文"人员"。
请问可不可以提供相应的html代码
然后这么做有啥缺点吗，比如加载网页慢之类的？
谢谢
可以在同一网页中设置两个字典对象, 根据选择中文或者英文。在网页上显示更新不同字典对象的内容。
可以用vue的机制动态自动更新网页上显示的内容
需要在切换页面的时候保持选择的语言环境，可以把选择语言的状态保存在localStorage中，下次打开页面时从localStorage中获取语言状态。
给你写了个例子
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{lang.word2}}</h2>
<p>{{lang.word1}}</p>
<input type="button" value="选择中文" @click="changeLang('cn')" />
<input type="button" value="选择英文" @click="changeLang('en')" />
</div>
<script type="text/javascript">
var cn = {
"word1":"10月9号，今天老板吃了好多饭。",
"word2":"你好",
};
var en = {
"word1":"Oct 9th, my boss ate too much today.",
"word2":"Hello",
};
var vm = new Vue({
el: '#app',
data: {
cn:cn,
en:en,
lang:{},
},
created: function () {
this.lang = localStorage.lang=="en"?this.en:this.cn;
},
methods: {
changeLang: function(name) {
localStorage.lang = name;
this.lang = name=="en"?this.en:this.cn;
}
}
});
</script>
</body>
</html>
如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮