浅谈Vue中的{{$t()}}基本知识（附Demo）

1. 基本知识

{{$t()}} 是VueI18n插件提供的函数，主要用于在Vue.js应用中进行国际化处理

目的	用法	参数
根据当前语言环境返回对应的翻译文本，以便在页面上显示多语言内容	通过{{$t('key')}}的形式调用，其中key是需要翻译的文本的标识符	‘key’：作为参数传递给$t()函数的字符串，用于指定需要翻译的文本的标识符或键值 这个标识符通常是一个在翻译文件中定义的键，用于查找对应的翻译文本

工作原理：

1. 当调用$t(‘key’)时，VueI18n插件会根据当前语言环境和给定的’key’来查找对应的翻译文本
2. VueI18n插件会检查当前语言环境下的翻译文件（通常是JSON格式的文件），根据’key’查找对应的翻译文本
3. 如果找到了匹配的翻译文本，则返回该文本；否则，返回默认文本或者’key’本身。

2. Demo

简易Demo如下，便于理解

const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    'zh': {
      hello: '你好',
      support: '技术支持：Vue.js 社区'
    },
    'en': {
      hello: 'hello',
      support: 'Technical Support: Vue.js Community'
    }
  }
});

其html模板如下：

<template>
  <div class="support">
    <p>{{ $t('support') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style scoped>
/* 样式可以根据需求自定义 */
</style>