多语言实现原理

<template>
  <div>
    <h1>多语言实现原理</h1>
    <!-- 需求：中英文切换 -->
    <div>
      <el-button @click="lang='zh'">中文</el-button>
      <el-button @click="lang='en'">英文</el-button>
    </div>
    <div class="content">
      {{ t('hello') }}，vue！
    </div></div>
</template>

<script>
/**
 * 实现中英文切换功能，只需要满足3个条件即可完成
 * 实现步骤
 * 1、语言标识符, 中文标识符设置为'zh'，英文标识符设置为'en'
 * 2、中英文对照表
 * 3、翻译官 ---- 用一个函数来实现
 *
 * */
export default {
  data() {
    return {
      lang: 'zh',
      message: {
        zh: { // 中文
          hello: '你好'
        },
        en: { // 英文
          hello: 'hello'
        }
      }
    }
  },
  methods: {
    // 函数t即为翻译官
    t(content) {
      /**
       * 需要几个条件才能翻译成功
       * 1、需要知道当前翻译成什么语言 ---- this.lang
       * 2、需要知道翻译的内容 --- 调用函数的是传入即可 --- content
       * 3、中文对照表  --- this.message
       * */
      // 获取当前的语言表
      const curLang = this.message[this.lang]
      // console.log(47, curLang)
      // 根据需要翻译的内容从当前的语言表中找到对应的值即可
      const value = curLang[content]
      return value
    }
  }
}
</script>

<style>
.content{
  padding: 20px;
}
</style>