使用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 ...
随机推荐
- go gin框架和springboot框架WEB接口性能对比
1 简要概述 最近看起go lang,真的被go的goroutine(协程)惊艳到了,一句 go function(){#todo},即可完成一个并发的工作. 看到gin这个web框架时,突然就特别想 ...
- OAuth 2.0、OIDC 原理
OAuth 目录 OAuth 什么是 OAuth? 为什么是 OAuth? SAML OAuth 和 API OAuth 主要组件 OAuth 作用域 OAuth 参与者 OAuth 令牌 OAuth ...
- PHP版DES算法加密数据
php7之后的版本 php的mcrypt 扩展已经过时了大约10年,并且用起来很复杂.因此它被废弃并且被 OpenSSL 所取代. 从PHP 7.2起它将被从核心代码中移除并且移到PECL中.PHP手 ...
- php的call_user_func_array()使用场景
1..动态调用普通函数时,比如参数和调用方法名称不确定的时候很好用 function sayEnglish($fName, $content) { echo 'I am ' . $content; } ...
- hdu3255 线段树扫描线求体积
题意: 给你n个矩形,每个矩形上都有一个权值(该矩形单位面积的价值),矩形之间可能重叠,重叠部分的权值按照最大的算,最后问这n个矩形组成的图形的最大价值. 思路: 线段树扫描线 ...
- JVM虚拟机-了解Java堆中对象分配、布局和访问的全过程
目录 前言 对象的创建 类加载检查 分配内存 内存空间分配方式 指针碰撞 空闲列表 并发时的内存分配 同步处理:CAS 本地线程分配缓冲:TLAB 初始化零值 设置对象头 执行 init 方法 对象的 ...
- thinkphp5.1 第三方类库引入
说明:在thinkPHP 5.1.X新版取消了Loader::import方法以及import和vendor助手函数(我的PHPExcel包在vendor文件夹中) 1.上图 2.控制器中:
- mongo中常用的命令
命令使用mongo shell 执行 1.mongo中增加新字段 mongo shell 进入后执行use table选中要添加字段的库 db.getCollection('表名').update({ ...
- SpringBoot邮件报警
SpringBoot邮件报警 一.介绍 邮件报警,大体思路就是收集服务器发生的异常发送到邮箱,做到服务器出问题第一时间知道,当然要是不关注邮箱当我没说 二.配置邮箱 (1).注册两个邮箱账号(一个用来 ...
- Python 基础教程 —— Pandas 库常用方法实例说明
目录 1. 常用方法 pandas.Series 2. pandas.DataFrame ([data],[index]) 根据行建立数据 3. pandas.DataFrame ({dic}) ...