Vue中使用$t(‘xxx‘)实现中英文切换;

(原文链接)

介绍

{{$t('key')}} :是VueI18n插件提供的函数,主要用于根据当前语言环境返回对应的翻译文本,以便在页面上显示多语言内容。
key:作为参数传递给函数$t()的字符串,用于指定需要翻译的文本的标识符或键值;这个标识符通常是一个在翻译文件中定义的键,用于查找对应的翻译文本。

工作原理

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

Demo

<template><div class="support"><p>{{ $t('support') }}</p></div>
</template><script>
export default {data() {return {};}
};
</script><style scoped>
/* 样式可以根据需求自定义 */
</style>
const i18n = new VueI18n({locale: 'zh',messages: {'zh': {hello: '你好',support: '技术支持:Vue.js 社区'},'en': {hello: 'hello',support: 'Technical Support: Vue.js Community'}}
});

步骤

案例:点击默认中文后切换为英文,如:中文变英文;首页变Home;职业生涯变Careers展示;
1.需要在main.js中引入vue-i18n(版本:"vue-i18n": "^9.2.2"

import i18n from './language'

2.浏览器的语言环境不同,相应设置不同的语言配置文件
在这里插入图片描述
3.创建不同语言标识对应的文件。
index.js:

import { createI18n } from "vue-i18n"; //引入vue-i18n组件
import zh from "./zh";
import en from "./en";
//注册i18n实例并引入语言文件const i18n = createI18n({locale: localStorage.getItem("lang") || "en", // 语言标识(缓存里面没有就用中文)fallbackLocale: "zh", //没有英文的时候默认中文语言messages: {en, zh}
});export default i18n;

en.js:

//创建英文语言包对象
export default {lang: '中文',menus: {Home: 'Home',Careers:'Careers',},}

zh.js:

// 1、创建中文语言包对象
export default{lang: 'English',menus: {Home: '首页',Careers:'职业生涯',},
}

Demo.vue:

//来一个可以中英文切换按钮
<el-button class="item" type="text" @click="exchangeLanguage( this.$t('lang'))"><div>{{ this.$i18n.t('lang') }}</div>
</el-button><div class="item1" @click="aClick">{{ $i18n.t('menus.Home') }}</div>
<div class="item2" @click="jump">{{ $i18n.t('menus.Careers') }}</div>
data() {return {zh: this.$i18n.locale.includes("z"),en: this.$i18n.locale.includes("e"),}
},
created() {window.localStorage.setItem("lang", this.$i18n.locale);console.log("zh还是en" ,this.$i18n.locale)},methods: {//点击导航在新窗口显示目标网页aClick() {if (item.value === "menus.Home"){this.$router.push({ name: 'demo1Path' });//首页}},jump() {let route = this.$router.resolve({name: 'demo2Path'});window.open(route.href, '_blank');//职业生涯},//点击切换中英文exchangeLanguage(value) {if (value === 'English') {this.$i18n.locale = 'en';//localStorage.setItem 将 "lang" 的值设置为 "en",使用 i18n 的英文作为默认语言localStorage.setItem("lang", "en");} else if (value === '中文') {this.$i18n.locale = 'zh';//localStorage.setItem 将 "lang" 的值设置为 "zh",使用 i18n 的中文作为默认语言localStorage.setItem("lang", "zh");}console.log("this.$i18n.locale:是en还是zh", this.$i18n.locale)},
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/326465.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++要哮着学】初识C++,什么是C++?什么是命名空间?什么又是缺省函数?

文章目录 前言1、C简介1.1、什么是C1.2、C起源1.3、C发展 2、C关键字&#xff08;C98&#xff09;3、命名空间3.1、命名空间的定义及使用3.2、命名空间的嵌套3.3、命名空间的三种使用方式3.3.1、加命名空间名称及作用域限定符3.3.2、使用using将命名空间中某个成员引入3.3.3、使…

MySQL 通过 systemd 启动时 hang 住了……

mysqld&#xff1a;哥&#xff0c;我起不来了…… 作者&#xff1a;贲绍华&#xff0c;爱可生研发中心工程师&#xff0c;负责项目的需求与维护工作。其他身份&#xff1a;柯基铲屎官。 爱可生开源社区出品&#xff0c;原创内容未经授权不得随意使用&#xff0c;转载请联系小编…

【Docker学习】重启容器的docker restart

命令&#xff1a; docker container restart 描述&#xff1a; 重启一个或多个容器 用法&#xff1a; docker container restart [OPTIONS] CONTAINER [CONTAINER...] 别名&#xff1a; docker restart(docker的一些命令可以简写&#xff0c;docker restart就等同于docker cont…

SQLZOO:The JOIN operation

数据表&#xff1a;game-gaol-eteam game idmdatestadiumteam1team210018 June 2012National Stadium, WarsawPOLGRE10028 June 2012Stadion Miejski (Wroclaw)RUSCZE100312 June 2012Stadion Miejski (Wroclaw)GRECZE100412 June 2012National Stadium, WarsawPOLRUS... goal …

UE4_照亮环境_不同雾效的动态切换

一、问题及思路&#xff1a; 我们在一个地图上&#xff0c;经常切换不同的区域&#xff0c;不同的区域可能需要不同的色调&#xff0c;例如暖色调的野外或者幽暗的山洞&#xff0c;这两种环境上&#xff0c;雾效的选用肯定不一样&#xff0c;夕阳西下的户外用的就是偏暖的色调&…

【小白的大模型之路】基础篇:Transformer细节

基础篇&#xff1a;Transformer 引言模型基础架构原论文架构图EmbeddingPostional EncodingMulti-Head AttentionLayerNormEncoderDecoder其他 引言 此文作者本身对transformer有一些基础的了解,此处主要用于记录一些关于transformer模型的细节部分用于进一步理解其具体的实现机…

LeetCode_栈和队列相关OJ题目

✨✨所属专栏&#xff1a;LeetCode刷题专栏✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ 上一篇&#xff1a;数据结构_栈和队列(Stack & Queue)-CSDN博客 有效的括号 解析: 这里我们用数组实现的栈来解决这个问题&#xff0c;在有了栈的几个基础接口之后&#xff0c;我们运用这…

【Chrome实用命令笔记】

文章目录 Chrome实用命令笔记1、chrome基本介绍2. 打开开发者工具&#xff08;DevTools&#xff09;方法一&#xff1a;快捷键方法二&#xff1a;右键菜单方法三&#xff1a;浏览器设置 2. 开发者工具面板Elements面板Console面板Sources面板Network面板Performance面板Memory面…

(done) Beam search

参考视频1&#xff1a;https://www.bilibili.com/video/BV1Gs421N7S1/?spm_id_from333.337.search-card.all.click&vd_source7a1a0bc74158c6993c7355c5490fc600 &#xff08;beam search 视频&#xff09; 参考博客1&#xff1a;https://jasonhhao.github.io/2020/06/19/…

Springboot项目如何创建单元测试

文章目录 目录 文章目录 前言 一、SpringBoot单元测试的使用 1.1 引入依赖 1.2 创建单元测试类 二、Spring Boot使用Mockito进行单元测试 2.1 Mockito中经常使用的注解以及注解的作用 2.2 使用Mockito测试类中的方法 2.3 使用Mockito测试Controller层的方法 2.4 mock…

通过 Java 操作 redis -- list 列表基本命令

目录 使用命令 lpush&#xff0c;lrange&#xff0c;rpush 使用命令 lpop 和 rpop 使用命令 blpop&#xff0c;brpop 使用命令 llen 关于 redis list 列表类型的相关命令推荐看Redis - list 列表 要想通过 Java 操作 redis&#xff0c;首先要连接上 redis 服务器&#xff…

电信网关配置管理系统 rewrite.php 文件上传致RCE漏洞复现

0x01 产品简介 中国电信集团有限公司(英文名称“China Telecom”、简称“中国电信”)成立于2000年9月,是中国特大型国有通信企业、上海世博会全球合作伙伴。电信网关配置管理系统是一个用于管理和配置电信网络中网关设备的软件系统。它可以帮助网络管理员实现对网关设备的远…

【Android】源码解析Activity的结构分析

源码解析Activity的结构分析 目录 1、Activity、View、Window有什么关联&#xff1f;2、Activity的结构构建流程3 源码解析Activity的构成 3.1 Activity的Attach方法3.2 Activity的OnCreate 4、WindowManager与View的关系总结 1、一个Activity对应几个WindowManage&#xff0…

【MySQL数据库开发设计规范】之字段设计规范

欢迎点开这篇文章&#xff0c;自我介绍一下哈&#xff0c;本人姑苏老陈 &#xff0c;是一名JAVA开发老兵。 本文收录于 《MySQL数据库开发设计规范》专栏中&#xff0c;该专栏主要分享一些关于MySQL数据库开发设计相关的技术规范文章&#xff0c;定期更新&#xff0c;欢迎关注&…

【C++】string类的使用④(字符串操作String operations || 常量成员Member constants)

&#x1f525;个人主页&#xff1a; Forcible Bug Maker &#x1f525;专栏&#xff1a; STL || C 目录 前言&#x1f525;字符串操作&#xff08;String operations&#xff09;c_strdataget_allocatorcopyfindrfindfind_first_offind_last_offind_first_not_offind_last_not…

Dockerfile实践java项目

目的&#xff1a;用java项目测试dockerfil部署&#xff08;前提是安装好了docker&#xff09; 部署准备文件如下 1. java项目 java项目demo地址 https://gitee.com/xiaoqu_12/dockerfileDemo.git 或者百度网盘直接下载打包好的jar包 链接&#xff1a;https://pan.baidu.com/s/…

ES扩缩容

ES扩容 1.1 页面扩容ES1 1.2 拷贝插件及ssl文件 JSON [ec_admin@kde-offline3 ~]$ sudo rsync -avP /usr/kde_ec/2.3.6.6-1/elasticsearch1/plugins/* kde-offline6:/usr/kde_ec/2.3.6.6-1/elasticsearch1/plugins/ ;echo $? [ec_admin@kde-offline3 ~]$ sudo rsync -avP /us…

JavaScript 进阶(一)

一、作用域 1. 局部作用域 &#xff08;1&#xff09;函数作用域 、 &#xff08;2&#xff09;块作用域 2. 全局作用域 3. 作用域链 g 作用域可以访问 f 作用域&#xff08;子访问父&#xff09;&#xff0c;但是 f 作用域&#xff0c;不能访问 g 作用域&#xff08;父…

内容与图像一对多问题解决

场景复现 分析&#xff1a; 其实这是两给表&#xff0c;一个内容表&#xff0c;一个图片表&#xff0c;一对多的关系。 解决思路: 1. 先上传图片拿到图片的List集合ids&#xff0c;返回值是集合的ids&#xff0c;给到前端 2. 再添加内容表的数据生成了id&#xff0c;遍历查…

工程师工具箱系列(3)Arthas

文章目录 工程师工具箱系列&#xff08;3&#xff09;Arthas安装与准备Arthas插件使用场景查看某个变量值ognl方式调用Bean方法tt(TimeTunel)方式调用Bean的方法ognl调用带参数方法 资源总览 工程师工具箱系列&#xff08;3&#xff09;Arthas Java诊断利器 安装与准备 window…