可以在同一网页中设置两个字典对象, 根据选择中文或者英文。在网页上显示更新不同字典对象的内容。
可以用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>
如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮
