使用vue-i18n实现中英文切换(内含动态属性的绑定)
最近做学生管理系统,因为有国外的学生,所以要进行中英文切换,查了查Vue中使用vue-i18n插件能够实现网页的中英文切换,学习内容如下:
一、下载vue-i18n插件
npm install vue-i18n
二、定义中英文文件
中英文文件的格式如下(英文文件中对象的key值与之对应即可):
三、在main.js文件中引进i18n
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: localStorage.getItem('lang') || 'zn',
messages: {
'zh': require('./language/cn'), //自定义的中文文件
'en': require('./language/en') //自定义的英文文件
}
})
四、使用方式
1. 切换中英文
绑定点击事件,切换中英文
this.$i18n.locale = 'en'; //或'cn'
2. 使用方式
<span>{{$t("language.notice")}}</span>
注意,$t()是个函数,"language.notice"是它的参数,是一个字符串,相当于传入了对象的key值。
如果需要动态绑定怎么办呢,比如,我们循环渲染"notice"、"information"等等,不知道"notice",那怎么办呢,如下段代码所示:
<template v-for='item in arr'>
<span>{{$t("language." + item)}}</span>
</template>
只需要将参数组合成字符串即可。
五、ElementUI切换中英文
项目中我使用的是ElementUI,所以要同时对ElementUI里面的一些文字进行中英文切换,比如el-table中的“合计”。
1.在main.js中进行如下配置:
import enLocale from 'element-ui/lib/locale/lang/en' //导入element-ui的英文文件
import cnLocale from 'element-ui/lib/locale/lang/zh-CN' //导入element-ui的中文文件
const i18n = new VueI18n({
locale: localStorage.getItem('lang') || 'zn',
messages: {
'zh': {
...require('./language/cn'), //将两个对象合并成一个对象
...cnLocale
},
'en': {
...require('./language/en'),
...enLocale
}
}
})
2.按需引入ElementUI组件
如果是按需引入,则需要在main.js中加入以下代码:
import ElementLocale from 'element-ui/lib/locale'
ElementLocale.i18n((key, value) => i18n.t(key, value))
3.全局引入ElementUI组件
如果是全局引入,则需要在main.js中加入以下代码:
import Element from 'element-ui'
Vue.use(Element, {
i18n: (key, value) => i18n.t(key, value)
})
使用vue-i18n实现中英文切换(内含动态属性的绑定)的更多相关文章
- 【vue】中英文切换(使用 vue-i18n )
一.准备工作 1.vue-i18n 1.仓库地址 2.兼容性:支持 Vue.js 2.x 以上版本 1-1.安装依赖vue-i18n (c)npm install vue-i18n 1-2.使用 在 ...
- SpringMVC 国际化-中英文切换
项目结构 1.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...
- xadmin在Django 1.11中的使用及中英文切换
版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com xadmin是一个强大的替代django admin的管理后台,github地址为:https://g ...
- Element + Vue I18n动态import加载国际化语言包翻译文件
需求 项目为多页应用,包含产品a.b.c.d.e,每个产品都有自己的翻译文件.一次加载所有翻译文件是极度不合理的.于是考虑动态加载. 实现 参考官方文档:延迟加载翻译 项目结构 │ ├── dist ...
- JS国际化网站中英文切换(理论支持所有语言)应用于h5版APP
网页框架类APP实现国际化参考文案一 参考:https://blog.csdn.net/CSDN_LQR/article/details/78026254 另外付有自己实现的方法 本人用于H5版的AP ...
- 正则表达式split匹配多种例如 “】”,“,”两种(页面级中英文切换方案)
在做登陆界面的时候,因为涉及到中英文 因为前后台已经分离,所以前端需要自行设计中英文 做法: 编写两个文件,一个中文文件,一个是英文文件,分别放在对应的目录下面 文件的内容 { "login ...
- ThinkPHP3.2中英文切换!
小伙伴们好久不见!!! 最近公司项目版本升级,小梦已经忙成了狗,无暇顾及文章,今天抽时间写一篇助助兴! 用Thinkphp这个国产框架已经2年多了,现在有一个小功能:网站中英文切换功能,当然这 ...
- vue 2.0 路由切换以及组件缓存源代码重点难点分析
摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...
- 无法启动 Maya 集成的 qt designer 的解决方法和原因 以及 中英文切换
无法启动 Maya 集成的 qt designer 的解决方法和原因 以及 中英文切换 前言: Maya 集成了 PySide,同时集成了qt designer,在 Maya 的安装目录下的 bin ...
随机推荐
- Django 入门范例
1. Django 介绍 2. Django 环境搭建 3. 模型(Model) 4. 站点管理 5. 视图(View) 6. 模板(Template) 1. Django 介绍 MVC 模型 大部分 ...
- kubernetes集群EFK日志系统搭建
日志收集架构 Kubernetes 集群本身不提供日志收集的解决方案,一般来说有主要的3种方案来做日志收集: 在节点上运行一个 agent 来收集日志 在 Pod 中包含一个 sidecar 容器来收 ...
- TypeScript 入门自学笔记 — 类型断言(二)
码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14558034.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...
- Ionic5路由跳转传值复用
1. 路由技术 ( 详细记录 ) 是笔记不是博文,觉得写的不够详细的可以使用Ctrl + W组合键 路由跳转页面 1. HTML 中使用 routerLink 属性路由进行跳转,传值时使用 query ...
- 1017. Convert to Base -2
Given a number N, return a string consisting of "0"s and "1"s that represents it ...
- hdu1501 记忆化搜索
题意: 给你三个字符串,问你前两个能不能拼成第三个串. 思路: 直接记忆化神搜就行,思路水,看下代码就知道了.这个题目我感觉最大公共子序列dp的作法是错的,虽然有人ac了,随便 ...
- hdu4888 最大流(构造矩阵)
题意: 让你构造一个矩阵,满足每一行的和,和每一列的和都等于他给的,还要判断答案是否唯一,还有一点就是矩阵内所有的数字都是[0,k]范围的. 思路: 这个题目看完就让我想起了h ...
- Windows核心编程 第26章 窗口消 息
窗 口 消 息 Wi n d o w s允许一个进程至多建立10 000个不同类型的用户对象(User object):图符.光标.窗口类.菜单.加速键表等等.当一个线程调用一个函数来建立某个对象时, ...
- Spring Cloud Alibaba(8)---Feign服务调用
Feign服务调用 有关Spring Cloud Alibaba之前写过五篇文章,这篇也是在上面项目的基础上进行开发. Spring Cloud Alibaba(1)---入门篇 Spring Clo ...
- k3d入门指南:在Docker中运行K3s
在本文中,我们将简单了解k3d,这是一款可让您在安装了Docker的任何地方运行一次性Kubernetes集群的工具,此外在本文中我们还将探讨在使用k3d中可能会出现的一切问题. 什么是k3d? k3 ...