vue-i18n實(shí)現(xiàn)中英文切換的方法
更新時(shí)間：2020年07月06日 14:52:38 作者：無(wú)痕-范特西
這篇文章主要介紹了vue-i18n實(shí)現(xiàn)中英文切換的方法，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(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.使用按鈕進(jìn)行手動(dòng)切換，這里我用了switch用true和false來(lái)識(shí)別中英文，用這種方法也可以用于其他語(yǔ)言切換
<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實(shí)現(xiàn)中英文切換的方法的詳細(xì)內(nèi)容，更多關(guān)于vue 中英文切換的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vuex中g(shù)etters和actions的使用補(bǔ)充說(shuō)明
這篇文章主要介紹了在Vuex中關(guān)于getters和actions使用的補(bǔ)充作了簡(jiǎn)要說(shuō)明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2021-09-09
vuex實(shí)現(xiàn)購(gòu)物車(chē)功能
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)購(gòu)物車(chē)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細(xì)介紹了Vue使用NProgress進(jìn)度條的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
Vue使用openlayers實(shí)現(xiàn)繪制圓形和多邊形
這篇文章主要為大家詳細(xì)介紹了Vue如何使用openlayers實(shí)現(xiàn)繪制圓形和多邊形，文中的示例代碼講解詳細(xì)，感興趣的小伙伴快跟隨小編一起動(dòng)手嘗試一下2022-06-06
在Vue中，修飾符處理了許多DOM事件的細(xì)節(jié)，讓我們不再需要花大量的時(shí)間去處理這些煩惱的事情，而能有更多的精力專注于程序的邏輯處理,需要的朋友可以參考下2023-04-04
vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
關(guān)于vue中標(biāo)簽的屬性綁定值渲染問(wèn)題
這篇文章主要介紹了關(guān)于vue中標(biāo)簽的屬性綁定值渲染問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vuex的插件vuex-persistedstate數(shù)據(jù)持久化存儲(chǔ)操作
這篇文章主要介紹了Vuex的插件vuex-persistedstate數(shù)據(jù)持久化存儲(chǔ)操作,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
vue權(quán)限管理系統(tǒng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue權(quán)限管理系統(tǒng)的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
vue3使用quill富文本編輯器保姆級(jí)教程(附踩坑解決)
這篇文章主要給大家介紹了關(guān)于vue3使用quill富文本編輯器保姆級(jí)教程的相關(guān)資料,在許多網(wǎng)站和應(yīng)用程序中富文本編輯器是一種常見(jiàn)的工具,它使用戶能夠以直觀的方式創(chuàng)建和編輯文本內(nèi)容,需要的朋友可以參考下2023-11-11