vue.js国际化vue-i18n插件的使用问题,在模版文本、组件方法、jsf方法里的使用

1.在文本里使用{{$t("xxx")}}

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

2.在组件方法里使用$t('xxx')
<md-input-item :placeholder="$t('register.enterCode')">
3.在js方法里使用:this.$i18n.t('xxx')
this.$i18n.t('register.imgCodeFirst')

4.如果是在请求后返回的方法里使用需要在上面先定义个变量,var this_ = this; 然后里面使用this_才能正常使用

Toast.info(this_.$i18n.t('register.getMsgCodeSucceed'));
 
==============
在main.js里引入:
import i18n from './language/i18n'
 
new Vue({
el: '#app',
i18n,//挂载语言包
router:router,
store:store,
render: h => h(App)
})
相关配置:

i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) //以下为语言包单独设置的场景,单独设置时语言包需单独引用
const messages = {
'zh_CN':require('./zh'), //中文语言包
'en_US':require('./en'), //英文语言包
'zh_TW':require('./tw') //英文语言包
} //最后 export default,这一步肯定要写的
export default new VueI18n({
locale:localStorage.getItem("language") || 'zh_CN',//默认显示
messages, // silentTranslationWarn: true,
})

vue.js国际化vue-i18n插件的使用问题,在模版文本、组件方法、jsf方法里的使用的更多相关文章

  1. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  2. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  3. [译]怎样在Vue.js中使用jquery插件

    原文:http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins 使用Vue真的太棒了,但是也有可能使 ...

  4. Vue.js 使用cordova camera插件调取相机

    本文给出在vue.js里如何使用cordova的插件完成调取相机及图库,并完成图片上传的操作.具体的操作步骤如下 第一步:在cordova项目下安装cordova-plugin-camera插件 co ...

  5. vue+element-ui国际化(i18n)

    1. 下载element-ui和vue-i18n: npm i element-ui --save   npm i vue-i18n –save 2.  创建一个  i18n 文件夹, 在main.j ...

  6. Vue.js CLI4 Vue.config.js标准配置 (最全注释)

    前言: Vue.js CLI工具 不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成.那么该文件的配置至关重要 ...

  7. 学习Vue.js之vue移动端框架到底哪家强

    官网:https://cn.vuejs.org/. 转载:http://www.cnblogs.com/8899man/p/6514212.html Weex 2016年4月21日,阿里巴巴在Qcon ...

  8. vue.js实战——vue元素复用

    Vue在渲染元素时,出于效率考虑,会尽可能地复用已有的元素而非重新渲染,例: <!DOCTYPE html> <html lang="en"> <he ...

  9. vue.js实战——vue 实时时间

    created:实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el还不可用,需要初始化处理一些数据时会比较有用. mounted:el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里 ...

随机推荐

  1. about this blog

    这个博客大概是被我用来整理模板的吧╮(╯▽╰)╭ 因为本小盆友巨懒,99.9%是不会写什么题解或者学习笔记什么的

  2. corefx 源码追踪:找到引起 SqlDataReader.ReadAsync 执行延迟的那行代码

    最近遇到一个非常诡异的问题,在一个 ASP.NET Core 2.2 项目中,从 SQL Server 数据库查询 100 条数据记录,会出现 16-22s 左右的延迟.延迟出现在执行 SqlData ...

  3. flask微服务框架的初步接触

    测试2个关联的系统接口时,经常会遇到被测试系统或被测app的处理内部处理流程会依赖另一个系统的接口返回结果,这时,常用的做法就是写一个模拟测试桩,用作返回请求时的结果.java可以用servicele ...

  4. 点击按钮如何改变当前窗口的url

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 解决nohup中不写入日志的问题

    (一)问题描述: nohup 你的程序命令 如: nohup python manage.py runserver 0.0.0.0:6789   (此shell窗口1不要关,另外开一个shell窗口2 ...

  6. python学习笔记1-基础知识

    # 0.输入输出 # print数值型直接输出计算结果 pirnt( + ) # 输出 + = # input输入(可在括号内加提示语句) name = input('please enter you ...

  7. 增长中的时间序列存储(Scaling Time Series Data Storage) - Part I

    本文摘译自 Netflix TechBlog : Scaling Time Series Data Storage - Part I 重点:扩容.缓存.冷热分区.分块. 时序数据 - 会员观看历史 N ...

  8. ElasticSearch 随笔

     1.如何用亚马逊S3存储一个ES服务索引.http://t.cn/R0fAJwK 2.ELK实战 - 利用Nginx日志分析API耗时.http://t.cn/R6sgQfU 3.Kibana中的地 ...

  9. ubuntu 16.04 安装wechat, chrome等

    安装wechat 按照https://www.jb51.net/article/131179.htm,结果发现不行. 用apt-get install electronic-wechat的方式呢,也不 ...

  10. NetCore2.0下使用EF CodeFirst创建数据库

    本文所使用的VS版本:VS2017 15.3.0 首先新建一个.net core项目  取名NetCoreTask 使用模型视图控制器方式 新建Model层 在Model层下新建一个user实体类 1 ...