vue-i18n實(shí)現(xiàn)中英文切換的方法
更新時(shí)間：2020年07月06日 14:52:38 作者：無痕-范特西
這篇文章主要介紹了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來識(shí)別中英文，用這種方法也可以用于其他語言切換
<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 中英文切換的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vite項(xiàng)目配置less全局樣式的實(shí)現(xiàn)步驟
最近想實(shí)現(xiàn)個(gè)項(xiàng)目,需要配置全局less,本文主要介紹了vite項(xiàng)目配置less全局樣式的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-02-02
vue2從數(shù)據(jù)變化到視圖變化之diff算法圖文詳解
這篇文章主要介紹了vue2從數(shù)據(jù)變化到視圖變化之diff算法圖文詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue-cli3使用mock數(shù)據(jù)的方法分析
這篇文章主要介紹了vue-cli3使用mock數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了vue-cli3使用mock數(shù)據(jù)的相關(guān)實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊流程
自定義指令是對普通DOM元素進(jìn)行的底層操作,它是一種有效的的補(bǔ)充和擴(kuò)展,不僅可以用于定義任何的dom操作,并且是可以復(fù)用的,下面這篇文章主要給大家介紹了關(guān)于vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊流程的相關(guān)資料,需要的朋友可以參考下2023-02-02
vue3循環(huán)設(shè)置ref并獲取的解決方案
我們在平時(shí)做業(yè)務(wù)的時(shí)候,父子組件通信會(huì)經(jīng)常用到ref,這篇文章主要給大家介紹了關(guān)于vue3循環(huán)設(shè)置ref并獲取的解決方案,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
v-model 是 vue.js 提供的語法糖，根據(jù)不同的表單控件監(jiān)聽不同的事件，實(shí)現(xiàn)對表單控件的數(shù)據(jù)雙向綁定。這篇文章主要介紹了vue 表單輸入格式化中文輸入法異常,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了使用vue實(shí)現(xiàn)手寫簽名功能,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-07-07
這篇文章主要為大家詳細(xì)介紹了Vue中的自定義渲染器和異步渲染的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
Vue實(shí)現(xiàn)tab導(dǎo)航欄并支持左右滑動(dòng)功能
本文給大家介紹利用Vue實(shí)現(xiàn)tab導(dǎo)航欄，并且通過flex布局實(shí)現(xiàn)左右滑動(dòng)效果，通過代碼給大家分享tab導(dǎo)航欄布局的實(shí)現(xiàn)，本文給大家展示了完整代碼，需要的朋友參考下吧2021-06-06
本篇文章主要介紹了VUE使用vuex解決模塊間傳值問題 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06