zoukankan      html  css  js  c++  java
  • vue.js国际化vue-i18n插件的使用问题,在模版文本、组件方法、jsf方法里的使用

    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,
    })
  • 相关阅读:
    springboot配置文件拆分
    SpringBoot中集成thymeleaf模板
    thymeleaf语法(二)
    thymeleaf的基本使用(一)
    js的for in循环和for of循环
    css动画箭头上线转动切换效果
    Gradle配置lintOptions
    使用IntelliJ IDEA创建Spring Boot项目
    SpringBoot的注解:
    Python的虚拟机安装已经如何配置Scrapy for Mac
  • 原文地址:https://www.cnblogs.com/zdz8207/p/vue-i18n-js.html
Copyright © 2011-2022 走看看