Wie vue und vue-i18n die mehrsprachige Umschaltung von Hintergrunddaten implementieren

Dieses Mal zeige ich Ihnen, wie Vue und vue-i18n eine mehrsprachige Umschaltung von Hintergrunddaten realisieren können und wie Vue und vue-i18n eine mehrsprachige Umschaltung von Hintergrunddaten realisieren können Notizen Was sind das? Hier sind tatsächliche Fälle.

Definieren Sie die Funktion in der XXX.js-Datei:

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;  //获取后台返回的数据
    this.users = dataObj.items.map(function (e,i) {  //遍历获取的数据，用this.$t()将每项数据与翻译资源对应
     e.gender=context.$t(e.gender);            //context 是this, gender 与 diabetes_type 为每个items里的key；gender里的value有三种：'GDRNF'、‘GDRF'、‘GDRM'
     e.diabetes_type = context.$t(e.diabetes_type);
     return e;
    });
    this.listLoading = false;
    // console.log(dataObj);
   }
  })
 },

Dann können Sie die Funktion aufrufen Die Vue-Komponente: .$t() entspricht dem Wert der Elemente in der Übersetzungsressource und realisiert so die mehrsprachige Umschaltung der Hintergrunddaten en.json-Übersetzungsressource:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema php Chinesische Website!

Empfohlene Lektüre: So aktualisieren Sie das Array mit $set in vue.js

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

So verschieben Sie das Array in vue.js Positionieren und aktualisieren Sie die Ansicht

Das obige ist der detaillierte Inhalt vonWie vue und vue-i18n die mehrsprachige Umschaltung von Hintergrunddaten implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!