vue-i18n实现国际化语言切换效果代码-html代码-BFW代码库

vue-i18n实现国际化语言切换效果代码

代码语言：html

所属分类：其他

代码描述：使用vue-i18n来实现网页中多种语言切换显示的国际化效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!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>&nbsp;&nbsp;&nbsp;&nbsp; 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: {
              .........完整代码请登录后点击上方下载按钮下载查看