zoukankan      html  css  js  c++  java
  • vue-i18n web 前端国际化

    vue-i18n是一个针对于vue的国际化插件,使用非常简单

    1. 下载包

    npm install vue-i18n

     2、创建中、英文包文件

    创建两个文件,一个为zh.js代表中文,en.js代表英文,具体内容格式如下

    zh.js文件                     en.js文件

       

    3、配置main.js

    // 引入插件和语言包

    import VueI18n from 'vue-i18n'
    import zh from './i18n/langs/zh'
    import en from './i18n/langs/en'
    Vue.use(VueI18n)

    //实例化vue-i18n

    const i18n = new VueI18n({
        // 从本地存储中取,如果没有默认为中文,
        // 这样可以解决切换语言后,没记住选择的语言,刷新页面后还是默认的语言
        locale: localStorage.getItem('lang') || 'zh',
        messages: {
          'zh': zh, // 中文语言包
          'en': en // 英文语言包
        }
      })

    // 将i18n实例挂载到vue上

    4. 在组件中使用

     在组件中使用,主要有插值表达式中的使用,标签属性的使用,js中的使用

     

    插值表达式中的使用

    <span>{{$t('nav.home')}}</span>

    标签中属性的使用

     <span v-text="$t('nav.home')"></span>

    :label="$t('dataCenter.commonTools.fastApplication.applyForm.amount')"
    :placeholder="$t('dataCenter.commonTools.fastApplication.applyForm.holderOccupation')"

    js中的使用

     

     
     
     
     
     

     

     

  • 相关阅读:
    bzoj 3238
    bzoj 3473 后缀自动机多字符串的子串处理方法
    bzoj 2998 第k小字串
    bzoj 3672 利用点分治将CDQ分治推广到树型结构上
    bzoj 3671 贪心
    NOIP模拟题——nan
    NOIP模拟题——kun(栈)
    hduP2586——How far away ?
    DP习题
    NOIP模拟题——来自风平浪静的明天
  • 原文地址:https://www.cnblogs.com/jimmy2019/p/14283338.html
Copyright © 2011-2022 走看看