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. __x__(43)0910第六天__ clearfix 解决:垂直外边距重叠,高度塌陷

    <div class="box1"> <tabl></table> <div class="box2">< ...

  2. MySQL数据库下载安装和DataGrip的下载安装和破解

    一: 数据库下载 地址:官网https://dev.mysql.com/downloads/file/?id=482771;如果参数id失效,就选择之前的版本,5.7就可以,太新的没人用,老的很稳定. ...

  3. jexus System.BadImageFormatException Details: Non-web exception. Exception origin (name of application or object): App_global.asax_ai3fjolq.

    Application ExceptionSystem.BadImageFormatExceptionInvalid method header format 0Description: HTTP 5 ...

  4. 电子产品使用感受之——我的Mac只有256GB,我的照片库该怎么办?

    说实话我使用过的Mac中最大的默认存储可能就是2011年开始使用的MacBook Pro了,机器型号大概是MC700,这台机器当年自带320GB 5400转机械硬盘,直到2016年因为使用率太高,机械 ...

  5. [05-02]红帽linux常用操作命令

    命令怎么用(三种方式) shutdown --help shutdown --? man shutdown  (man 就是manual  手册, 指南) 服务 service 怎么知道服务的名字呢? ...

  6. Web开发(调试方法 F12)

    参考: 参考:MDN 调试HTML 参考:什么是浏览器开发者工具? 参考:检查和编辑页面与样式 工具参考:标记验证服务 工具参考:直接输入验证(直接输入HTML源码进行在线检查) 目录: 1.相关快捷 ...

  7. python learning 字符串方法

    一.重点掌握的6种字符串方法: 1.join命令 功能:用于合并,将字符串中的每一个元素按照指定分隔符进行拼接 程序举例: seq = ['1','2','3','4'] sep = '+' v = ...

  8. 【托业】【全真题库】TEST3-语法题

    101. sales representative 销售代表 keep one's promise with 遵守对……的诺言,信守对……的承诺 107. express interest in 表现 ...

  9. Jenkins+Jmeter持续集成笔记(三:集成到Jenkins)

    上一篇笔记中已经实现了通过ant工具执行Jmeter测试脚本,并输出html格式测试报告到指定目录. 在本章中,将尝试把这个过程丢进jenkins去执行. 1.Jenkins全局工具配置 登录jenk ...

  10. 尝试启动 ADB 服务器时出错 解决方法

    启动CMD→ adb kill-server → adb start-server;