vue-i18n.js多语言切换,获取当前语言,国际化翻译插件Demo

切换语言、修改当前语言(vue-i18n)

{{ $t('hello') }}

代码示例： this.$i18n.locale = 'zh'

获取当前语言

代码示例： console.log(this.$i18n.locale) // {{ $i18n.locale }}

Demo 完整代码

<div id="app1">
  <h3>切换语言、修改当前语言(vue-i18n)</h3>
  <div>
    <div>{{ $t('hello') }}</div>

    <button @click="setLanguage('en')">切换到English</button>
    <button @click="setLanguage('zh')">切换到中文</button>

    <p>代码示例： this.$i18n.locale = 'zh' </p>
  </div>

  <div>
    <h3>获取当前语言</h3>
    <span>代码示例： this.$i18n.locale</span>
    <span>{{ $i18n.locale }}</span>
  </div>

</div>

<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js" referrerpolicy="no-referrer"></script> -->
<!-- <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js" referrerpolicy="no-referrer"></script> -->

<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue-i18n/8.27.0/vue-i18n.min.js"></script>
<script>
  // 准备翻译的语言环境信息
  var messages = {
    en: {
      // 你的语言表json数据
      hello: 'hello world'
    },
    zh: {
      // 你的语言表json数据
      hello: '你好世界'
    }
  }

  var i18n = new VueI18n({
    locale: 'zh', // 设置默认语言
    messages: messages, // 设置地区信息
  })

  var vm1 = new Vue({
    i18n: i18n,
    el: '#app1',
    data: {
      value: '1'
    },
    methods: {
      setLanguage(lang) {
        this.$i18n.locale = lang
      },
      click() {
        alert(this.value)
      }
    },
  })
</script>

vue-i18n.js多语言切换,获取当前语言,国际化翻译插件Demo

切换语言、修改当前语言(vue-i18n)

获取当前语言

Demo 完整代码

相关主题：