Vue.js項(xiàng)目實(shí)戰(zhàn)之多語(yǔ)種網(wǎng)站的功能實(shí)現(xiàn)（租車(chē)）
首先來(lái)看一下網(wǎng)站效果，想寫(xiě)這個(gè)項(xiàng)目的讀者可以自行下載哦，地址：https://github.com/Stray-Kite/Car：
在這個(gè)項(xiàng)目中，我們主要是為了學(xué)習(xí)語(yǔ)種切換，也就是右上角的 中文/English 功能的實(shí)現(xiàn)。
首先看一下模擬的后臺(tái)數(shù)據(jù)src/config/modules/lang.js 文件中:
關(guān)鍵代碼：
export default {
name: 'Homepage',
components: {
ScrollNumber
},
data () {
return {
lang: 'chinese',
pageIndex: 0,
stepIndex: 0
}
},
......其余代碼 44 methods: {
addClass (el, _class) {177 //切換語(yǔ)言
toggleLang (lang) {
this.lang = lang
// this.animatePage()
}
},
//以下幾個(gè)computed是獲取config文件夾里的數(shù)據(jù)
computed: {
langs () {
return config.langs[this.lang] //主要靠這里切換，這個(gè)切換的本質(zhì)其實(shí)就是使用了另一套英文的數(shù)據(jù)（換了一套后臺(tái)數(shù)據(jù)）
},
......其余代碼198 }
}
總結(jié)
以上所述是小編給大家介紹的Vue.js項(xiàng)目實(shí)戰(zhàn)之多語(yǔ)種網(wǎng)站的功能實(shí)現(xiàn)（租車(chē)）,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
Vue實(shí)現(xiàn)移動(dòng)端日歷的示例代碼
工作中遇到一個(gè)需求是根據(jù)日歷查看某一天/某一周/某一月的睡眠報(bào)告，但是找了好多日歷組件都不是很符合需求，只好自己手寫(xiě)一個(gè)日歷組件，順便記錄一下，希望對(duì)大家有所幫助2023-04-04
vue實(shí)現(xiàn)同時(shí)設(shè)置多個(gè)倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)同時(shí)設(shè)置多個(gè)倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
Vue.js實(shí)戰(zhàn)之使用Vuex + axios發(fā)送請(qǐng)求詳解
這篇文章主要給大家介紹了關(guān)于Vue.js使用Vuex與axios發(fā)送請(qǐng)求的相關(guān)資料，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-04-04
Vue 子組件與數(shù)據(jù)傳遞問(wèn)題及注意事項(xiàng)
這篇文章主要介紹了Vue子組件與數(shù)據(jù)傳遞問(wèn)題及需要注意事項(xiàng)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
淺談vue同一頁(yè)面中擁有兩個(gè)表單時(shí),的驗(yàn)證問(wèn)題
今天小編就為大家分享一篇淺談vue同一頁(yè)面中擁有兩個(gè)表單時(shí),的驗(yàn)證問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
在Vue項(xiàng)目中取消ESLint代碼檢測(cè)的步驟講解
今天小編就為大家分享一篇關(guān)于在Vue項(xiàng)目中取消ESLint代碼檢測(cè)的步驟講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
vue2使用wangeditor實(shí)現(xiàn)手寫(xiě)輸入功能
這篇文章主要為大家詳細(xì)介紹了vue2如何使用wangeditor實(shí)現(xiàn)手寫(xiě)輸入功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下2023-12-12
Vue動(dòng)態(tài)組件與異步組件超詳細(xì)講解
這篇文章主要介紹了Vue動(dòng)態(tài)組件與異步組件，動(dòng)態(tài)組件是根據(jù)數(shù)據(jù)的變化，可以隨時(shí)切換不同的組件，比如咱們現(xiàn)在要展示一個(gè)文本框和輸入框，我們想要根據(jù)我們data中定義的值去決定是顯示文本框還是輸入框2023-03-03
vue調(diào)試工具沒(méi)有Pinia模塊的簡(jiǎn)單解決辦法
Pinia是Vue的存儲(chǔ)庫(kù),它允許您跨組件/頁(yè)面共享狀態(tài),這篇文章主要給大家介紹了關(guān)于vue調(diào)試工具沒(méi)有Pinia模塊的簡(jiǎn)單解決辦法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用)
這篇文章主要介紹了vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用),本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01