Vue.js項(xiàng)目實(shí)戰(zhàn)之多語(yǔ)種網(wǎng)站的功能實(shí)現(xiàn)（租車(chē)）

更新時(shí)間：2019年08月07日 08:58:04 作者：迷途紙鳶

這篇文章主要介紹了Vue.js項(xiàng)目實(shí)戰(zhàn)之多語(yǔ)種網(wǎng)站（租車(chē)）的功能實(shí)現(xiàn) ,需要的朋友可以參考下

首先來(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 v-for循環(huán)重復(fù)數(shù)據(jù)無(wú)法添加問(wèn)題解決方法【加track-by=''索引''】
這篇文章主要介紹了vue v-for循環(huán)重復(fù)數(shù)據(jù)無(wú)法添加問(wèn)題解決方法,結(jié)合實(shí)例形式分析了vue.js通過(guò)在v-for循環(huán)中添加track-by='索引'解決重復(fù)數(shù)據(jù)無(wú)法添加問(wèn)題相關(guān)操作技巧,需要的朋友可以參考下
2019-03-03
vue+ts大文件切片上傳的實(shí)現(xiàn)示例
在Vue項(xiàng)目中,大圖片和多數(shù)據(jù)Excel等大文件的上傳是一個(gè)非常常見(jiàn)的需求，本文主要介紹了vue+ts大文件切片上傳，具有一定的參考價(jià)值，感興趣的可以了解一下
2024-01-01
Vue vm.$attrs使用場(chǎng)景詳解
這篇文章主要介紹了vm.$attrs使用場(chǎng)景詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
解決vue數(shù)據(jù)更新但table內(nèi)容不更新的問(wèn)題
這篇文章主要給大家介紹了vue數(shù)據(jù)更新table內(nèi)容不更新解決方法,文中有詳細(xì)的代碼示例供大家作為參考,感興趣的同學(xué)可以參考閱讀一下
2023-08-08
vue 父組件通過(guò)$refs獲取子組件的值和方法詳解
今天小編就為大家分享一篇vue 父組件通過(guò)$refs獲取子組件的值和方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
vue2.0獲取鼠標(biāo)位置的方法
今天小編就為大家分享一篇vue2.0獲取鼠標(biāo)位置的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
去除element-ui下拉框的下拉箭頭的實(shí)現(xiàn)
我們最開(kāi)始拿到的element-ui是帶有下拉箭頭的,那么如何去除element-ui下拉框的下拉箭頭的實(shí)現(xiàn),本文就詳細(xì)的介紹一下,感興趣的可以了解一下
2023-08-08
Vue3 AST解析器-源碼解析
這篇文章我們從 ast 生成時(shí)調(diào)用的 baseParse 函數(shù)分析，再到 baseParse 返回 createRoot 的調(diào)用結(jié)果，一直到細(xì)化的講解了 parseChildren 解析子節(jié)點(diǎn)函數(shù)中的其中某一個(gè)具體解析器的執(zhí)行過(guò)程。最后通過(guò)一個(gè)簡(jiǎn)單模板舉例,需要的朋友可以參考下
2021-09-09
Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法
下面小編就為大家分享一篇Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vuex實(shí)現(xiàn)及簡(jiǎn)略解析(小結(jié))
這篇文章主要介紹了vuex實(shí)現(xiàn)及簡(jiǎn)略解析(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-03-03