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. wamp 环境安装php_mongo 或 mongodb的扩展

    特别注意:momgo 与mondb 是两个不同的扩展,不是同一个,这是一个坑 1.查看你的php版本,Compiler,Thread safety版本 2.下载地址 https://pecl.php. ...

  2. http跳转htts的htaccess文件设置

    RewriteEngine OnRewriteCond %{SERVER_PORT} 80RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R,L]Options ...

  3. java 实现文件上传下载以及查看

    项目的目录结构 代码  IOUtils.java package cn.edu.zyt.util; import java.io.IOException; import java.io.InputSt ...

  4. python摸爬滚打之day032 管道 数据共享 进程池

    1.进程池 当有成千上万个任务需要被执行的时候,有了进程池我们就不必去创建大量的进程. 首先,创建进程需要消耗时间,销毁进程(空间,变量,文件信息等等的内容)也需要消耗时间, 第二即便开启了成千上万的 ...

  5. webservice学习教程(三)--

    快速入门 首先,我们来尝试一下调用别人写好的webService 来体验一把:我们访问http://www.webxml.com.cn/zh_cn/index.aspx 进入到里边 当我们输入一个号码 ...

  6. 007-chrome插件系列

    1.Axure RP Extension for Chrome 2.Charset 3.CLEAN crxMouse Gestures 4.Google 翻译 5.JSONView 6.restlet

  7. 2018-2019-2 《网络对抗技术》Kali安装 Week1 20165236

    2018-2019-2 <网络对抗技术>Kali安装 Week1 20165236 一.kali 下载 安装 网络 共享 软件源 二.安装步骤 1.官网上下载kali Linux: 2.参 ...

  8. MySQL SQL Explain输出学习

    MySQL的explain命令语句提供了如何执行SQL语句的信息,解析SQL语句的执行计划并展示,explain支持select.delete.insert.replace和update等语句,也支持 ...

  9. unity开发多语言版本

    1.文字部分 ①.文字提取参考 http://www.xuanyusong.com/archives/2987: ②.把提取出来的文字放到excel总转换成繁体等版本: ③.把excel转换成txt文 ...

  10. 分享一个不错的Unittest测试报告

    分享一个不错的,unittest测试报告. 先上图: 代码如下: 复制下来保存成py可用 #coding=utf-8 """ A TestRunner for use w ...