vue+element-ui国际化(i18n)
1、 下载element-ui和vue-i18n:
npm i element-ui --save npm i vue-i18n –save
2、 创建一个 i18n 文件夹,



在main.js 中导入i18n,挂在到vue实例中区;
注意: 在en.js或者zh-cn.js中,可以将message中的几个属性合成一个,如上面的linkWords。
3、使用语言
直接在使用的地方 $t(‘message.key’) ;
<p>{{$t('message.hello')}}</p>
或者使用 v-t=”{ path: ‘message.hello’ }” 效果和上面相同
<p v-t="{ path: 'message.poem'}"></p>
,并且可以传值

4、切换语言环境
给按钮注册事件,事件中切换this.$i18n.locale = ‘ ’ 的值为相应的语言值即可。
switchChinese(){
this.$i18n.locale = 'zh';
window.localStorage.setItem('qinLang','zh')
},
switchEnlish(){
this.$i18n.locale = 'en';
window.localStorage.setItem('qinLang','en')
}
vue+element-ui国际化(i18n)的更多相关文章
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- 基于 vue+element ui 的cdn网站(多页面,都是各种demo)
前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...
- vue + element ui 阻止表单输入框回车刷新页面
问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...
- vue+element ui 的时间控件选择 年月日时分
前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...
随机推荐
- <每日一题> Day3:CodeForces-1141B.MaximalContinuousRest(简单题)
题目链接 参考代码: #include <iostream> #include <algorithm> using namespace std; + ; int value[m ...
- HDU 6070题解(二分+线段树)
题面 传送门 此题的题意不是很清晰,要注意的一点是在区间[L,R]中,默认题目编号最后一次出现的时候是AC的 比如1 2 1 2 3 ,在区间[1,4]中,第3次提交时AC第1题,第4次提交时AC第2 ...
- 关于 Python 程序的运行方面,有什么手段能提升性能?
1.使用多进程,充分利用机器的多核性能2.对于性能影响较大的部分代码,可以使用 C 或 C++编写3.对于 IO 阻塞造成的性能影响,可以使用 IO 多路复用来解决4.尽量使用 Python 的内建函 ...
- 洛谷 - P3391 【模板】文艺平衡树(Splay) - 无旋Treap
https://www.luogu.org/problem/P3391 使用无旋Treap维护序列,注意的是按顺序插入的序列,所以Insert实际上简化成直接root和Merge合并,但是假如要在序列 ...
- 问题 M: 最亲密的x个人
问题 M: 最亲密的x个人 时间限制: 1 Sec 内存限制: 128 MB提交: 412 解决: 38[提交] [状态] [命题人:jsu_admin] 题目描述 有一天,地球受到了降维打击,从 ...
- python编程基础之简单购物车
#good文件夹内容[ ['Iphone7', 5800], ['Coffee', 30], ['疙瘩汤', 10], ['Python Book', 99], ['Bike', 199], ['Vi ...
- 安装FaaS
[root@localhost ~]# [root@localhost ~]# new OS:centos-7 [root@localhost ~]# [root@localhost ~]# vim ...
- keepalived的配置文件
! Configuration File for keepalived global_defs { notification_email { # acassen@firewall.loc # fail ...
- 【LeetCode】前缀树 trie(共14题)
[208]Implement Trie (Prefix Tree) (2018年11月27日) 实现基本的 trie 树,包括 insert, search, startWith 操作等 api. 题 ...
- bzoj4771 七彩树 dfs序+主席树+树链的并
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4771 题解 一道不错的树链并的基础练习题. 如果不是树,而是一个数组的话,对于给定区间内的不同 ...