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)的更多相关文章

  1. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  2. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  3. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  4. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  5. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  6. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  7. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  8. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  9. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

  10. vue+element ui 的时间控件选择 年月日时分

    前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...

随机推荐

  1. Java 和操作系统交互,你猜会发生什么?

    作者:lonelysnow https://www.jianshu.com/p/7f6832d61880 结合 CPU 理解一行 Java 代码是怎么执行的 根据冯·诺依曼思想,计算机采用二进制作为数 ...

  2. JDK11 | 第三篇 : 局部变量类型推断

    文章首发于公众号<程序员果果> 地址 : https://mp.weixin.qq.com/s/PB0Mw4bzjDML7nto2M8x2w 一.简介 Java局部变量类型推断(LVTI) ...

  3. es6基本介绍及使用

    1.什么是es6 ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应 ...

  4. Buy Tickets POJ - 2828 思维+线段树

    Buy Tickets POJ - 2828 思维+线段树 题意 是说有n个人买票,但是呢这n个人都会去插队,问最后的队列是什么情况.插队的输入是两个数,第一个是前面有多少人,第二个是这个人的编号,最 ...

  5. 字典树(Trie树)实现与应用(转)

    一.概述 1.基本概念 字典树,又称为单词查找树,Tire数,是一种树形结构,它是一种哈希树的变种. 2.基本性质 根节点不包含字符,除根节点外的每一个子节点都包含一个字符 从根节点到某一节点.路径上 ...

  6. 深入浅出Oracle数据读取一致性和事务表

    保证Oracle数据库读取一致性的关键是SCN.每一个数据块头都会记录一个事务提交的SCN.同时每一数据块头都包含一个事务表(ITL),事务必须获得一个ITL事务表才能进行数据修改.该事务表用来确定当 ...

  7. 第二讲shiro异常及执行流程

    在认证过程中,有一个父异常为:AuthenticationException 该异常有几个子类,分别对应不同的异常情况: (1)DisabledAccountException:账户失效异常 (2)E ...

  8. 2018-2-13-win-10-UWP-标签

    title author date CreateTime categories win 10 UWP 标签 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:2 ...

  9. 离线下载Express 2015 for Windows 10

    我在微软https://www.visualstudio.com/zh-cn/downloads/download-visual-studio-vs 点Express 2015 for Windows ...

  10. python基础——对时间进行加减

    在datetime模块中有一个timedelta这个方法,它代表两个datetime之间的时间差.. In [42]: datetime.datetime.now().strftime('%Y-%m- ...