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