vue-i18n實現(xiàn)中英文切換的方法
更新時間：2020年07月06日 14:52:38 作者：無痕-范特西
這篇文章主要介紹了vue-i18n實現(xiàn)中英文切換的方法，文中示例代碼非常詳細，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
1.下載
npm install vue-i18n
2.創(chuàng)建中英文包
2.1 中文包
2.2 英文包
3.在main里面引入
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
const i18n = new VueI18n({
locale:
localStorage.getItem("lang") == (undefined || "" || null)
? "zh"
: localStorage.getItem("lang"),
messages: {
zh: require("../static/lang/text-zh.json"),
en: require("../static/lang/text-en.json")
}
});
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount("#app");
4.在組件中使用
<div>{{ $t('footer.home') }}</div>
或者
<input type="span" value="" :placeholder="$t('footer.home')" v-model="search" />
或者
this.$toast(this.$t('footer.home'))
5.使用按鈕進行手動切換，這里我用了switch用true和false來識別中英文，用這種方法也可以用于其他語言切換
<switch @change="changeEn" :checked="zhOren" />
changeEn(e) {
if (e.target.value) {
//中文
this._i18n.locale = 'zh';
localStorage.setItem('lang', 'zh');
} else {
//英文
this._i18n.locale = 'en';
localStorage.setItem('lang', 'en');
}
}
以上就是vue-i18n實現(xiàn)中英文切換的方法的詳細內(nèi)容，更多關(guān)于vue 中英文切換的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vuex中g(shù)etters和actions的使用補充說明
這篇文章主要介紹了在Vuex中關(guān)于getters和actions使用的補充作了簡要說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步2021-09-09
這篇文章主要為大家詳細介紹了vuex實現(xiàn)購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細介紹了Vue使用NProgress進度條的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
Vue使用openlayers實現(xiàn)繪制圓形和多邊形
這篇文章主要為大家詳細介紹了Vue如何使用openlayers實現(xiàn)繪制圓形和多邊形，文中的示例代碼講解詳細，感興趣的小伙伴快跟隨小編一起動手嘗試一下2022-06-06
在Vue中，修飾符處理了許多DOM事件的細節(jié)，讓我們不再需要花大量的時間去處理這些煩惱的事情，而能有更多的精力專注于程序的邏輯處理,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)ToDoList簡單實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
關(guān)于vue中標(biāo)簽的屬性綁定值渲染問題
這篇文章主要介紹了關(guān)于vue中標(biāo)簽的屬性綁定值渲染問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Vuex的插件vuex-persistedstate數(shù)據(jù)持久化存儲操作
這篇文章主要介紹了Vuex的插件vuex-persistedstate數(shù)據(jù)持久化存儲操作,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
vue權(quán)限管理系統(tǒng)的實現(xiàn)代碼
這篇文章主要介紹了vue權(quán)限管理系統(tǒng)的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要給大家介紹了關(guān)于vue3使用quill富文本編輯器保姆級教程的相關(guān)資料,在許多網(wǎng)站和應(yīng)用程序中富文本編輯器是一種常見的工具,它使用戶能夠以直觀的方式創(chuàng)建和編輯文本內(nèi)容,需要的朋友可以參考下2023-11-11