欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue與vue-i18n結(jié)合實(shí)現(xiàn)后臺(tái)數(shù)據(jù)的多語(yǔ)言切換方法

 更新時(shí)間：2018年03月08日 09:26:29   作者：張三少  
下面小編就為大家分享一篇vue與vue-i18n結(jié)合實(shí)現(xiàn)后臺(tái)數(shù)據(jù)的多語(yǔ)言切換方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

在XXX.js文件中定義函數(shù)：

getUser(context,info){
  context.$http.get(SERVER_URL+'/users',info).then(function(data){
   let err =data.body.error;
   if(err===0){
    let dataObj = data.body.userLists;  //獲取后臺(tái)返回的數(shù)據(jù)
    this.users = dataObj.items.map(function (e,i) {  //遍歷獲取的數(shù)據(jù)，用this.$t()將每項(xiàng)數(shù)據(jù)與翻譯資源對(duì)應(yīng)
     e.gender=context.$t(e.gender);            //context 是this, gender 與 diabetes_type 為每個(gè)items里的key；gender里的value有三種：'GDRNF'、‘GDRF'、‘GDRM'
     e.diabetes_type = context.$t(e.diabetes_type);
     return e;
    });
    this.listLoading = false;
    // console.log(dataObj);
   }
  })
 },

然后可以在vue 組件中調(diào)用函數(shù) ：XXX.getUser(this,info); 將后臺(tái)獲取的數(shù)據(jù)做相應(yīng)操作后放入users數(shù)組；

以上方法是通過(guò)map函數(shù)遍歷獲取到的數(shù)據(jù)，用this.$t()將items的value與翻譯資源中的value對(duì)應(yīng)，從而實(shí)現(xiàn)后臺(tái)數(shù)據(jù)的多語(yǔ)言切換；

en.json翻譯資源中的部分?jǐn)?shù)據(jù)：

{ 
  "GDRNF":"Not Fill", 
  "GDRF":"Female", 
  "GDRM":"Male", 
 }

以上這篇vue與vue-i18n結(jié)合實(shí)現(xiàn)后臺(tái)數(shù)據(jù)的多語(yǔ)言切換方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • vue prop傳值類型檢驗(yàn)方式

    vue prop傳值類型檢驗(yàn)方式

    這篇文章主要介紹了vue prop傳值類型檢驗(yàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07
  • Vue中的assets和static目錄:使用場(chǎng)景及區(qū)別說(shuō)明

    Vue中的assets和static目錄:使用場(chǎng)景及區(qū)別說(shuō)明

    這篇文章主要介紹了Vue中的assets和static目錄:使用場(chǎng)景及區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • vue 自定義組件 v-model雙向綁定、 父子組件同步通信的多種寫法

    vue 自定義組件 v-model雙向綁定、 父子組件同步通信的多種寫法

    父子組件通信，都是單項(xiàng)的，很多時(shí)候需要雙向通信。這篇文章主要介紹了vue 自定義組件 v-model雙向綁定、 父子組件同步通信,需要的朋友可以參考下
    2017-11-11
  • vue elementUI下拉框值無(wú)法選中問(wèn)題及解決方案

    vue elementUI下拉框值無(wú)法選中問(wèn)題及解決方案

    大家在寫系統(tǒng)的時(shí)候,會(huì)有這樣的需求：點(diǎn)擊修改后把需要修改的數(shù)據(jù)放入表單,其中會(huì)有下拉單選框、下拉多選框,展示下拉框單選框內(nèi)的數(shù)據(jù)只需要將所選id賦值給下拉框綁定的值就可以了,下面給大家分享vue elementUI下拉框值無(wú)法選中問(wèn)題,感興趣的朋友一起看看吧
    2024-03-03
  • vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯(cuò)問(wèn)題分析

    vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯(cuò)問(wèn)題分析

    由于package.json 文件中 vue、vue-template-compiler 版本號(hào)前面 多了個(gè) ^ 導(dǎo)致實(shí)際導(dǎo)入時(shí)，node_module中的 vue 版本可能被升級(jí)為 2.7.x，這篇文章主要介紹了vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯(cuò)問(wèn)題分析,需要的朋友可以參考下
    2023-01-01
  • Vue之Element級(jí)聯(lián)選擇器多選傳值以及回顯方式(樹形結(jié)構(gòu))

    Vue之Element級(jí)聯(lián)選擇器多選傳值以及回顯方式(樹形結(jié)構(gòu))

    這篇文章主要介紹了Vue之Element級(jí)聯(lián)選擇器多選傳值以及回顯方式(樹形結(jié)構(gòu))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-07-07
  • 淺談Vue.js中如何實(shí)現(xiàn)自定義下拉菜單指令

    淺談Vue.js中如何實(shí)現(xiàn)自定義下拉菜單指令

    這篇文章主要介紹了淺談Vue.js中如何實(shí)現(xiàn)自定義下拉菜單指令，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-01-01
  • 詳解vue.js 開發(fā)環(huán)境搭建最簡(jiǎn)單攻略

    詳解vue.js 開發(fā)環(huán)境搭建最簡(jiǎn)單攻略

    本篇文章主要介紹了vue.js 開發(fā)環(huán)境搭建最簡(jiǎn)單攻略，這里整理了詳細(xì)的步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-06-06
  • 詳解vue中移動(dòng)端自適應(yīng)方案

    詳解vue中移動(dòng)端自適應(yīng)方案

    這篇文章主要介紹了vue移動(dòng)端自適應(yīng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • Vue Router 配合 keep-alive 不生效的問(wèn)題及解決方案

    Vue Router 配合 keep-alive 不生效的問(wèn)題及解決方案

    我在 app.vue 中使用了 router-view 標(biāo)簽,來(lái)展示 layout 和其他一級(jí)路由,然后在 layout 下的 main 區(qū)域使用了一個(gè) router-view 來(lái)展示通過(guò)菜單欄切換的子路由,下面給大家介紹Vue Router 配合 keep-alive 不生效的問(wèn)題及解決方案,感興趣的朋友一起看看吧
    2024-01-01

最新評(píng)論