vue-i18n 用法及插件值

论坛 期权论坛 编程之家     
选择匿名的用户   2021-5-29 14:19   460   0

npm install vue-i18n


在main.js中引入vue-i18n

import VueI18n from 'vue-i18n'
import LangEn from '../static/en'
import LangZhCHS from '../static/zhCHS'
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'en', // 语言标识
  messages:{
    'en': LangEn,
    'zhCHS': LangZhCHS,
  }
})

挂载到Vue的实例上

new Vue({
  el: '#app',
  router,
  i18n, //<====
  template: '<App/>',
  components: { App }
})

en.js里为

module.exports={
  message: {
    hello: 'hello',
    about: 'about',
    welcome: "Welcome"
  }
}
用发为

{{ $t("message.welcome") }}


在js中去掉双引号,,如果插件里用值的话应用this指向

属性中用法

:placeholder="$t('placeholder.enter')"

遇到的问题:
绑定在data中的值,在切换中英文时不会自动更新,正在寻找解决办法,如有高手知道,可以指点一二。

2018.03.22自答:
去 vue-i18n 提了 issue 才知道是我对 vue 理解不够深刻,
绑定在data中不会自动更新的原因是 Vue 组件中的 data 属性只会在组件实例化时候后计算一次
解决办法是,写在 computed props 里

https://github.com/kazupon/vue-i18n/commit/d007ac8e91261dda63eb9ce95cf2b7bb73bf7968

 props: {
    dialogTitle:{
        type: String,
        default: ()=>{this.$t('notice')}
    }
  }



分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP