vue-i18n 用法及插件值

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')}
    }
  }



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值