bruaba 2021-10-09 00:48 采纳率: 100%
浏览 183
已结题

html网页多语言动态切换

 
电脑xiao白,研究室要更新多语言主页。
之前研究室用的都是静态切换方式,中英文分开设置页面。更新内容太繁琐,英文界面就年久失修了。

这次我想设置一个动态切换方式。
理想环境是,设置一个全局函数,用来选择中文或者英文。在网页上弄一个语言切换开关。
然后针对需要多语言的词条,提供中文英文两种内容,依据全局函数来显示内容。(有些内容不需要多语言)

研究室主页更新的内容不多,之前看到过在网页文件目录下分别设置cn.json和en.json文件的方式,还是觉得太麻烦了。
最好就是,每次更新的时候,都只在同一网页文件上更新。
比如今天发生了一件事,我要添加的内容只有:
cn) 10月9号,今天老板吃了好多饭。
en) Oct 9th, my boss ate too much today.
然后根据选择的语言显示相应内容。

还有就是主页有不同的Tab,人员、研究课题介绍等等。这些页面文件相互独立
需要在切换不同Tab的时候,保持选择的语言环境。
比如主页选了英文环境,这时候点击"Member",希望跳转的"Member"页面仍然是英文,而不是中文"人员"。

请问可不可以提供相应的html代码
然后这么做有啥缺点吗,比如加载网页慢之类的?

谢谢

  • 写回答

1条回答 默认 最新

  • 关注

    可以在同一网页中设置两个字典对象, 根据选择中文或者英文。在网页上显示更新不同字典对象的内容。
    可以用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>
    
    

    如有帮助,望采纳!谢谢! 点击我这个回答右上方的【采纳】按钮

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 10月17日
  • 已采纳回答 10月9日
  • 修改了问题 10月9日
  • 修改了问题 10月9日
  • 展开全部

悬赏问题

  • ¥15 vue3的子组件在父页面调用不显示不生效问题
  • ¥15 cadence PEX
  • ¥15 phython创建了文件 显示在项目下面,但运行不了,运行时还是运行main文件,并且说main文件不允许并行运行
  • ¥20 C++哈希表的设计构造哈希表
  • ¥15 FutureWarning:不推荐使用空或全 NA 条目的 DataFrame 串联行为。怎么改呢?
  • ¥15 Chatgpt突然无法正常显示数学公式,如何解决?
  • ¥15 一个用华为模拟器做的实验。
  • ¥28 opencv Cuda C++编译
  • ¥15 插入sim卡4g模组反复断连
  • ¥100 如何把 16bit Bayer 图像数据转换为 TIFF RGB