应用九:Vue之国际化(vue-i18n)
vue-i18n是一款针对Vue.js 的国际化插件,具体应用步骤如下:
一、安装插件
- npm install vue-i18n --save
二、在main.js中引入插件
- import VueI18n from 'vue-i18n'
- Vue.use(VueI18n)
三、创建i18n实例
- const i18n = new VueI18n({
- // 默认语言
- locale: 'zh',
- // 引入对应的语言包文件
- messages: {
- 'zh': require('@/assets/languages/zh.json'),
- 'en': require('@/assets/languages/en.json')
- }
- });
注:为了在页面刷新后仍然能够保持当前的语言环境,一般会将语言参数缓存到localStorage中,locale属性的初始赋值方式会变为 locale: localStorage.getItem(‘lang’) || ‘zh’
四、在assets目录下新建对应的语言json文件
- // zh.json
- {
- "message": {
- "greeting": "你好"
- }
- }
- // en.json
- {
- "message": {
- "greeting": "hello"
- }
- }
注:json文件中的key值必须使用双引号。
五、使用
- // 在template中的使用方式:
- <span>{{$t('message.greeting')}}</span>
- // 在script脚本中的使用方式:
- this.$t('message.greeting')
六、语言切换
语言切换只要改变i18n实例中locale的值即可:
- this.$i18n.locale = ‘en’;
- localStorage.setItem(‘lang’, ‘en’)
上述呢就是vue国际化的基础用法~
应用九:Vue之国际化(vue-i18n)的更多相关文章
- vue+element-ui国际化(i18n)
1. 下载element-ui和vue-i18n: npm i element-ui --save npm i vue-i18n –save 2. 创建一个 i18n 文件夹, 在main.j ...
- vue国际化问题i18n为null
1.vue的国际化关于使用请看这位大佬的文章https://segmentfault.com/a/1190000015008808 2.this指向问题https://segmentfault.com ...
- 在Vue中加入国际化(i18n)中英文功能
1.npm安装方法 npm install vue-i18n --save 2.在src资源文件下创建文件夹i18n,i18n下面创建index.js文件,引入VueI18n和导入语言包(按开发需求可 ...
- vue.js国际化vue-i18n插件的使用问题,在模版文本、组件方法、jsf方法里的使用
vue.js国际化vue-i18n插件的使用问题,在模版文本.组件方法.jsf方法里的使用 1.在文本里使用{{$t("xxx")}} <span>{{$t(" ...
- vue项目国际化实现 vue-i18n使用详细教程
1.安装vue-i18n: npm i vue-i18n -S 当然你也可以这样: <script src="https://unpkg.com/vue/dist/vue.js&quo ...
- vue + element-ui 国际化实现
1. 安装组件和插件 cnpm i element-ui -S // 安装elementcnpm i vue-i18n -S //安装i18n 2.将国际化资源放在assets目录下 3.在src下新 ...
- vue使用国际化
转载请注明作者与出处 一:安装vue-i18n npm install vue-i18n --save 二:定义不同语言的json语言包 一般把它放到npm工程中的src目录下,因为这个目录是要进行编 ...
- 第五十九篇:关于Vue
好家伙,前面关于vue的学习太散太乱了,我决定重新整理一下知识框架,当作复习了,并且在其中补充一些概念 先提出一个问题:怎么把数据弄到页面上? 若不借助vue,把数据填充到页面上, 我们需要操作dom ...
- Java国际化(i18n)
Java国际化(i18n) 最近在做一个网站国际化的功能.用Java做开发,使用spring+velocity. Java提供了对i18n的支持,spring对其做了集成,可以很方便的配置.主要思想就 ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
随机推荐
- Spark day03
补充算子 transformations mapPartitionWithIndex 类似于mapPartitions,除此之外还会携带分区的索引值. repartition 增加或减少分区.会产生s ...
- API管理的五大规则
http://www.csdn.net/article/2012-12-18/2812929-5-Rules-For-API-Management 1. 设计 开发人员使用API访问各种不同的类,并且 ...
- Oracle中事物处理--事物隔离级别
n 事物隔离级别 概念:隔离级别定义了事物与事物之间的隔离程度. ANSI/ISO SQL92标准定义了一些数据库操作的隔离级别(这是国际标准化组织定义的一个标准而已,不同的数据库在实现时有所不同) ...
- @spoj - ADAMOLD@ Ada and Mold
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个长度为 N 的序列 A,将其划分成 K + 1 段,划分 ...
- Java练习 SDUT-2787_加密术
加密术 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 加密技术是一种常用的安全保密手段,利用加密技术可以把重要的数据变 ...
- Docker镜像部分详解
拉取镜像: docker pull [选项] [Docker Registry 地址[:端口号]/]仓库名[:标签] Docker 镜像仓库地址:地址的格式一般是 [:端口号].默认地址是 Docke ...
- [React Native]高度自增长的TextInput组件
之前我们学习了从零学React Native之11 TextInput了解了TextInput相关的属性. 在开发中,我们有时候有这样的需求, 希望输入区域的高度随着输入内容的长度而增长, 如下: 这 ...
- W600 一块新的 KiCad PCB
W600 一块新的 KiCad PCB 打算做以下功能. Type-C USB. 使用 KiCad 画板. 加入串口芯片,方便调试. 使用 PCB 天线.
- mysql查询包含逗号的数据,并逗号拆分为多行展现
在做系统开发的时候,有可能是由于之前的遗留问题,导致在数据入库的时候,将多个数据以逗号分隔的实行,存储在一条数据中,例如: ID VALUE 1 yang,zheng,song 2 zhao,qian ...
- 初识 Knative: 跨平台的 Serverless 编排框架
Knative 是什么 Knative 是 Google 在 2018 的 Google Cloud Next 大会上发布的一款基于 Kubernetes 的 Serverless 框架.Knativ ...