這次帶給大家Vue怎樣切換國家語言,Vue切換國家語言的注意事項有哪些,以下就是實戰案例,一起來看一下。
在基於vue-cli專案開發過程中,多語言切換功能可使用vue-i18插件,具體實作方法如下:
step1: 在專案中安裝vue-i18外掛程式
cnpm install vue-i18n --save-dev
step2:在專案的入口檔案main.js中引入vue-i18n外掛程式 ##
import Vue from 'vue' import router from './router' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'zh', // 语言标识 messages: { 'zh': require('./assets/lang/zh'), 'en': require('./assets/lang/en') } }) // vue实例中引入 /* eslint-disable no-new */ new Vue({ el: '#app', i18n, router, template: '<Layout/>', components: { Layout }, })
#step3:頁面中使用
在模板中使用時,大概有以下3種情況,若有疏漏,望大家指正#zh.jsmodule.exports = { menu : { home:"首页" }, content:{ main:"这里是内容" } }en.js
module.exports = { menu : { home:"home" }, content:{ main:"this is content" } }1)在標籤內作為正文內容
<p class="title">{{$t('menu.home')}}</p>2)作為標籤屬性使用
<input :placeholder="$t('content.main')" type="text">3)作為js中文字使用時
console.log(this.$t('content.main'));4)待補充...step4:頁面上進行中英文切換,在中英文切換的按鈕上綁定事件,如下:
tabEn: function () { this.$i18n.locale = 'en' }, tabCn: function () { this.$i18n.locale = 'zh' }至此,vue-i18n插件使用完結。 相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! 推薦閱讀:
以上是Vue怎樣切換國家語言的詳細內容。更多資訊請關注PHP中文網其他相關文章!