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. linux 阿里云 centos7 环境下安装easymock(一)

    一.说一说Easy-mock的使用场景和优点:1.Easy Mock 是一个可视化,并且能快速生成 模拟数据 的持久化服务,2.基于 Swagger 创建项目,以节省手动创建接口的时间,这点也是我搭建 ...

  2. Excel VBA在生成副本的工作表中插入本工作簿中的VBA模块代码

    即在工作簿中添加一个工作表,然后移出并存为新的工作簿,在移出前将本工作簿的一个模块的代码拷贝至新的工作簿.下面是关键代码: '===================================== ...

  3. Java反射学习-3 - 反射获取属性,方法,构造器

    package cn.tx.reflect; import java.lang.reflect.Constructor; import java.lang.reflect.Field; import ...

  4. 2018-11-26-win10-UWP-Controls-by-function

    title author date CreateTime categories win10 UWP Controls by function lindexi 2018-11-26 20:0:6 +08 ...

  5. linux系统升级openssh

    一.升级前准备工作 安装openssh过程需gcc,zlib-devel,openssl-devel,等编译环境,如果通过rpm包来安装,需要解决各种依赖包,故配置本地yum源解决依赖问题. 1. 配 ...

  6. chattr 改变文件的扩展属性

    1. 命令功能 chattr和lsattr用来改变文件.目录属性和查看这种文件属性:chmod只是改变文件的读.写.执行权限,更底层的属性控制是由chattr来改变. 2. 语法格式 chattr [ ...

  7. Java 多态概念、使用

    1.概念 2.多态的格式与使用 package Java12; /* 代码当中体现多态性,其实就是一句话: 父类引用指向子类对象 格式: 父类名称 对象名 = new 子类名称(): 或者: 接口名称 ...

  8. [python 学习]正则表达式

    re 模块函数re 模块函数和正则表达式对象的方法match(pattern,string,flags=0) 尝试使用带有可选的标记的正则表达式的模式来匹配字符串.如果匹配成功,就返回匹配对象:如果失 ...

  9. css3背景颜色渐变属性

    https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...

  10. ZROI2019 提高十连测

    额 掰手指头一数 特么又是第三年十连测了= = 2017一场没打 那时候好像一场比赛也就100人左右 2018前几场还都好好补了 后来开始放飞自我了 这时候一场有150人还多了 2019想让今年的No ...