最近做学生管理系统,因为有国外的学生,所以要进行中英文切换,查了查Vue中使用vue-i18n插件能够实现网页的中英文切换,学习内容如下:

一、下载vue-i18n插件

npm install vue-i18n

二、定义中英文文件

中英文文件的格式如下(英文文件中对象的key值与之对应即可):

三、在main.js文件中引进i18n

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: localStorage.getItem('lang') || 'zn',
messages: {
'zh': require('./language/cn'), //自定义的中文文件
'en': require('./language/en') //自定义的英文文件
}
})

四、使用方式

1. 切换中英文

绑定点击事件,切换中英文

this.$i18n.locale = 'en'; //或'cn'

2. 使用方式

<span>{{$t("language.notice")}}</span>

注意,$t()是个函数,"language.notice"是它的参数,是一个字符串,相当于传入了对象的key值。

如果需要动态绑定怎么办呢,比如,我们循环渲染"notice"、"information"等等,不知道"notice",那怎么办呢,如下段代码所示:

<template v-for='item in arr'>
<span>{{$t("language." + item)}}</span>
</template>

只需要将参数组合成字符串即可。

五、ElementUI切换中英文

项目中我使用的是ElementUI,所以要同时对ElementUI里面的一些文字进行中英文切换,比如el-table中的“合计”。

1.在main.js中进行如下配置:

import enLocale from 'element-ui/lib/locale/lang/en'   //导入element-ui的英文文件
import cnLocale from 'element-ui/lib/locale/lang/zh-CN' //导入element-ui的中文文件
const i18n = new VueI18n({
locale: localStorage.getItem('lang') || 'zn',
messages: {
'zh': {
...require('./language/cn'), //将两个对象合并成一个对象
...cnLocale
},
'en': {
...require('./language/en'),
...enLocale
}
}
})

2.按需引入ElementUI组件

如果是按需引入,则需要在main.js中加入以下代码:

import ElementLocale from 'element-ui/lib/locale'

ElementLocale.i18n((key, value) => i18n.t(key, value))

3.全局引入ElementUI组件

如果是全局引入,则需要在main.js中加入以下代码:

import Element from 'element-ui'
Vue.use(Element, {
i18n: (key, value) => i18n.t(key, value)
})

使用vue-i18n实现中英文切换(内含动态属性的绑定)的更多相关文章

  1. 【vue】中英文切换(使用 vue-i18n )

    一.准备工作 1.vue-i18n 1.仓库地址 2.兼容性:支持 Vue.js 2.x 以上版本 1-1.安装依赖vue-i18n (c)npm install vue-i18n 1-2.使用 在 ...

  2. SpringMVC 国际化-中英文切换

    项目结构 1.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...

  3. xadmin在Django 1.11中的使用及中英文切换

    版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com xadmin是一个强大的替代django admin的管理后台,github地址为:https://g ...

  4. Element + Vue I18n动态import加载国际化语言包翻译文件

    需求 项目为多页应用,包含产品a.b.c.d.e,每个产品都有自己的翻译文件.一次加载所有翻译文件是极度不合理的.于是考虑动态加载. 实现 参考官方文档:延迟加载翻译 项目结构 │ ├── dist ...

  5. JS国际化网站中英文切换(理论支持所有语言)应用于h5版APP

    网页框架类APP实现国际化参考文案一 参考:https://blog.csdn.net/CSDN_LQR/article/details/78026254 另外付有自己实现的方法 本人用于H5版的AP ...

  6. 正则表达式split匹配多种例如 “】”,“,”两种(页面级中英文切换方案)

    在做登陆界面的时候,因为涉及到中英文 因为前后台已经分离,所以前端需要自行设计中英文 做法: 编写两个文件,一个中文文件,一个是英文文件,分别放在对应的目录下面 文件的内容 { "login ...

  7. ThinkPHP3.2中英文切换!

    小伙伴们好久不见!!!   最近公司项目版本升级,小梦已经忙成了狗,无暇顾及文章,今天抽时间写一篇助助兴!   用Thinkphp这个国产框架已经2年多了,现在有一个小功能:网站中英文切换功能,当然这 ...

  8. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  9. 无法启动 Maya 集成的 qt designer 的解决方法和原因 以及 中英文切换

    无法启动 Maya 集成的 qt designer 的解决方法和原因 以及 中英文切换 前言: Maya 集成了 PySide,同时集成了qt designer,在 Maya 的安装目录下的 bin ...

随机推荐

  1. Django 入门范例

    1. Django 介绍 2. Django 环境搭建 3. 模型(Model) 4. 站点管理 5. 视图(View) 6. 模板(Template) 1. Django 介绍 MVC 模型 大部分 ...

  2. kubernetes集群EFK日志系统搭建

    日志收集架构 Kubernetes 集群本身不提供日志收集的解决方案,一般来说有主要的3种方案来做日志收集: 在节点上运行一个 agent 来收集日志 在 Pod 中包含一个 sidecar 容器来收 ...

  3. TypeScript 入门自学笔记 — 类型断言(二)

    码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14558034.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...

  4. Ionic5路由跳转传值复用

    1. 路由技术 ( 详细记录 ) 是笔记不是博文,觉得写的不够详细的可以使用Ctrl + W组合键 路由跳转页面 1. HTML 中使用 routerLink 属性路由进行跳转,传值时使用 query ...

  5. 1017. Convert to Base -2

    Given a number N, return a string consisting of "0"s and "1"s that represents it ...

  6. hdu1501 记忆化搜索

    题意:       给你三个字符串,问你前两个能不能拼成第三个串. 思路:       直接记忆化神搜就行,思路水,看下代码就知道了.这个题目我感觉最大公共子序列dp的作法是错的,虽然有人ac了,随便 ...

  7. hdu4888 最大流(构造矩阵)

    题意:       让你构造一个矩阵,满足每一行的和,和每一列的和都等于他给的,还要判断答案是否唯一,还有一点就是矩阵内所有的数字都是[0,k]范围的. 思路:       这个题目看完就让我想起了h ...

  8. Windows核心编程 第26章 窗口消 息

    窗 口 消 息 Wi n d o w s允许一个进程至多建立10 000个不同类型的用户对象(User object):图符.光标.窗口类.菜单.加速键表等等.当一个线程调用一个函数来建立某个对象时, ...

  9. Spring Cloud Alibaba(8)---Feign服务调用

    Feign服务调用 有关Spring Cloud Alibaba之前写过五篇文章,这篇也是在上面项目的基础上进行开发. Spring Cloud Alibaba(1)---入门篇 Spring Clo ...

  10. k3d入门指南:在Docker中运行K3s

    在本文中,我们将简单了解k3d,这是一款可让您在安装了Docker的任何地方运行一次性Kubernetes集群的工具,此外在本文中我们还将探讨在使用k3d中可能会出现的一切问题. 什么是k3d? k3 ...