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. 使用Eclipse中的SVN提交代码遇到的问题

    问题: Previous operation has not finished; run 'cleanup' if it was interrupted svn: Commit failed (det ...

  2. spring boot 开始部署报Whitelabel Error Page错解决方法

    因为时刚刚才学spring boot ,第一次碰到的问题,花了半个小时终于明白了,SpringBoot 的application类会自动扫描子包类下的mapping方法,因此application类不 ...

  3. UIAlertController中TextField的用法

    这时候可以添加如下代码: [alertController addTextFieldWithConfigurationHandler:^(UITextField *textField) { // 可以 ...

  4. python 配置文件返回的两种方式,写法不一样而已

    配置文件如下: [MODE]mode:{ "register":"all"} 或者 mode = {"register":"all ...

  5. ant 执行jmeter脚本

    环境准备 1.jdk版本:java version "1.8.0_201" 2.jmeter版本:5.0 3.ant版本:Apache Ant(TM) version 1.10.5 ...

  6. Linux(CentOs 7)系统重装笔记(一)

    参考文章: https://www.jb51.net/article/95263.htm https://blog.csdn.net/JackLiu16/article/details/7988182 ...

  7. Typescript基础

    参数类型新特性: ​类型声明 变量/函数:类型(string.any.number.boolean.void五种基本类型) 例如:var age:number=19; function test(na ...

  8. linux驱动调试记录

    linux驱动调试 linux 目录 /proc 下面可以配置驱动的调试信息,比如给proc目录的自己定制的驱动的一文件设置一个变量,然后驱动程序跟了proc的参数值来配置调试级别.类似于内核调试的级 ...

  9. 2017(5)软件架构设计,web系统的架构设计,数据库系统,分布式数据库

    试题五(共 25 分) 阅读以下关于 Web 系统架构设计的叙述,在答题纸上回答问题1 至问题 3. [说明] 某公司开发的 B2C 商务平台因业务扩展,导致系统访问量不断增大,现有系统访问速度缓慢, ...

  10. 在centos7 上安装Python3

    Centos7缺省是python2.7. 现在需要使Python2和python3 共存,所以需要单独安装python3. 但是需要注意的是如果按缺省方式安装,则会替换python为python3.x ...