码迷,mamicode.com
首页 > 其他好文 > 详细

[Vue]使用 vue-i18n 切换中英文

时间:2018-08-26 18:27:36      阅读:387      评论:0      收藏:0      [点我收藏+]

标签:end   text   button   lod   天天向上   str   实例   enter   merge   

1、引入 vue-i18n 

import Vue from ‘vue‘
import VueI18n from ‘vue-i18n‘
import merge from ‘lodash/merge‘

 

2.准备本地的文言信息

const messages = {
    zh: {
      message: {
        hello: ‘好好学习,天天向上!‘
      }
    },
    en: {
      message: {
        hello: ‘good good study, day day up!‘
      }
    }
}

 

3、创建带有选项的 VueI18n 实例

const i18n = new VueI18n({
  locale: ‘zh‘,
  messages,
})

export default i18n

 

4、把 i18n 挂载到 vue 根实例上

import i18n from ‘@i18n‘

new Vue({
  router,
  store,
  i18n,
  render: h => h(App),
}).$mount(#app‘)

<div id="app">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新! -->
<button v-on:click="foo = ‘baz‘">Change it</button>
</div>

 

5、在模板中使用

<div id="app">
    <h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
</div>

 

[Vue]使用 vue-i18n 切换中英文

标签:end   text   button   lod   天天向上   str   实例   enter   merge   

原文地址:https://www.cnblogs.com/vickylinj/p/9537717.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!