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/ ...
随机推荐
- 旧接口注册LED字符驱动设备(动态映射)
#include <linux/init.h> // __init __exit #include <linux/module.h> // module_init module ...
- make: *** 没有指明目标并且找不到 makefile
make: *** 没有指明目标并且找不到 makefile. 停止. make: *** 没有规则可以创建目标“install”. 停止. 不是没有makefile文件,而是你没有安装gcc编译 ...
- SpringDataJPA使用
一.简介 SpringDataJpa是 JPA规范的一个很好的实现,简化了开发的复杂度,极大提升了开发的效率.SpringDataJpa通过 Repository接口及子接口可以很方便的实现持久化操作 ...
- c知识点总结2
函数 int func(int x){ //x:形式参数 .... } int main(){ .... int res=func(z); //z:实际参数 } 实参与形参具有不同的存储单元, 实参与 ...
- socket中TCP的三次握手连接和四次握手释放
三次握手连接 A: 我进来了啊 B:(有人来了安排个位子)回复:好的你进来吧 A:好的: 客户端向服务器发送一个SYN J 服务器向客户端响应一个SYN K,并对SYN J进行确认ACK J+1 客户 ...
- 使用jQuery实现Socket客户端
摘于抄书web前端开发 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- pg_controldata - 显示一个 PostgreSQL 集群的控制信息
SYNOPSIS pg_controldata [ datadir] DESCRIPTION 描述 pg_controldata 打印那些在 initdb 过程中初始化的信息,比如表版本和服务器的区域 ...
- js中跳出forEach循环
缘由:近期在项目中使用lodash.js中的_.foreach方法处理数据,需要在满足条件时结束循环并不执行后面的js代码. 因为foreach中默认没有break方法.在尝试中使用了return f ...
- 随笔3 HashMap<K,V>
equals.hashcode和==的区别 在介绍HashMap之前,我想先阐述一下我对这三者的理解,equals这个方法呢,就是在判断是否为同一对象(注意,这里的同一对象和相同的内存地址是不同的), ...
- [web 安全] php随机数安全问题
and() 和 mt_rand() 产生随机数srand() 和 mt_srand() 播种随机数种子(seed)使用: <?php srand(123);//播种随机数种子 for($i=0; ...