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. yield-Python大牛必须掌握的高端语法

    小白:大牛哥,刚才看到有一个函数不使用return返回结果,而是使用yield关键字返回结果,看不太明白,Python中yield关键字的用途是什么,它有什么作用呀? 大牛: 要想理解yield的作用 ...

  2. IDEA中Java目录结构

    IDEA中Java的目录结构 1.首先新建Project,选择Empty,新建空的项目 2.选择Module时候,需要选择JDK,JDK只需要选择到Java Home目录就可以了 3.创建好Modul ...

  3. CSS3进度条动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. 树莓派Pi账户密码简单重置

    由于经常忘记树莓派Pi账户的密码而导致无法正常的玩树莓派,本篇文章综合网上的教程,总结了两种快速重置树莓派Pi账户密码的方法,以下一切操作都需在树莓派本机上进行操作. 方法一: 打开终端,执行 sud ...

  5. 5105 pa3 Distributed File System based on Quorum Protocol

    1 Design document 1.1 System overview We implemented a distributed file system using a quorum based ...

  6. 利用tesseract-ocr进行验证码识别

    因为爬虫项目需要模拟登陆,可是有一个网站的登录需要输入验证码.其实这种登录有2种解决方案,一种是利用cookie,一种是识别图片.前者需要人工登录一次,而且有时效限制,故不太现实.后者可以,但是难点是 ...

  7. vue中对于图片是否正常加载的思考

    问题:由于业务需要,我们需要判断图片能否正常的加载,如果未正常加载的话,需要显示一张默认图片: 方案:1,由于后台返回的是一个图片id数组,例如 imgList=['343313131','21333 ...

  8. SQL语句分类

    SQL Structured Query Language SQL是结构化查询语言,是一种用来操作RDBMS的数据库语言,当前关系型数据库都支持使用SQL语言进行操作,也就是说可以通过 SQL 操作 ...

  9. postmaster - PostgreSQL多用户数据库服务器

    SYNOPSIS postmaster [ -A 0 | 1] [ -B nbuffers] [ -c name=value] [ -d debug-level] [ -D datadir] [ -F ...

  10. centos 7 jdk

    1.去oracle官网下载 2.查看当前环境中安装了那些jdk,如果有那么卸载掉 安装好的CentOS会自带OpenJdk,用命令 java -version ,会有下面的信息: java versi ...