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. hibernate 报query result offset is not supported

    在配置hibernate.cfg.xml时需指定使用数据库的方言: 例: <property name="dialect">org.hibernate.dialect. ...

  2. 2018-2019-1 20189210 《Linux内核原理与分析》第三周作业

    一.学习笔记 计算机的"三大法宝" 1.程序存储计算机. 2.函数调用对栈.堆栈的作用是:记录函数调用框架.传递函数参数.保存返回值地址.提供函数内部局部变量的存储空间.函数调用堆 ...

  3. 转载:[Java面经]干货整理, Java面试题(覆盖Java基础,Java高级,JavaEE,数据库,设计模式等)

    原文:http://www.cnblogs.com/wang-meng/p/5898837.html 一:继承.抽象类与接口区别.访问控制(private, public, protected,默认) ...

  4. 传统方式和插件方式 分别实现 分页 功能 pageHelper 插件

    实现分页  这里提供两种方式  一种是传统的分页方式  一种是基于pageHelper插件 实现的分类     推荐使用后者 前者是一般开发的方式   思路  先手动创建一个 pageUtil 工具 ...

  5. jQuery插件开发的五种形态小结(转)

    关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课.开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多.这里我把我自己总结出来的东西分享出 ...

  6. XAMPP 安装时 MySQL 无法启动,且提示端口占用。

    今天安装XAMPP时遇到了几个坑,忙活了一上午才搞定,写下来分享给同样遇坑的盆友们. MySQL 点击start 提示端口3306被占用,我改了端口号,又改了注册表,将注册表地址改为xampp中mys ...

  7. C++类中的Static关键字

    静态成员是可以独立访问的,也就是说,无须创建任何对象实例就可以访问,而静态成员函数可不建立对象就可以被使用.   或者说静态函数与一般函数没有太大的区别,只是访问有限制,静态变量跟一般的全局变量的区别 ...

  8. 提高你的python:解释 yield 和 Generators(生成器)

    转自:http://www.oschina.net/translate/improve-your-python-yield-and-generators-explained 原文:http://www ...

  9. python字典转化成json格式。JSONEncoder和JSONDecoder两个类来实现Json字符串和dict类型数据的互相转换

    遇到问题:进行Webservice接口测试时,对接口入参数据进行了处理,变成了dict格式,去进行接口请求报错. 需要转成成json格式,双引号去扩. 如下: 更改代码: # 在Python标准库的j ...

  10. mysql8.0.13免安装版配置

    一.下载 下载地址:https://dev.mysql.com/downloads/mysql/ 二.解压到某个目录,例如:D:/mysql/mysql-8.0.13-winx64 三.配置环境变量 ...