Vue.js weist dem Quellcode von img dynamisch einen Wert zu

Jetzt werde ich Ihnen eine Vue.js-Methode zur dynamischen Zuweisung des SRC-Werts von img vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Die Anforderungen sind wie folgt:

ajax ruft die Daten wie folgt ab

{
 "code": "200",
 "data": {
  "SumAmount": 200,
  "List": [{
   "amount": 100,
   "sex": "male",
   "fee": 1,
   "id": 98,
   "status": 2,
   "time": "2015-08-11"
  }, {
   "amount": 100,
   "sex": "female",
   "fee": 0,
   "id": 8,
   "status": 2,
   "time": "2015-06-12"
  }]
 },
 "msg": "success"
}

Dann rendern Sie die Liste auf der Seite. Wenn es männlich ist, setzen Sie die Quelle von img auf „images/male.png“, andernfalls auf „images/female.png“

Beides kann erreicht werden, damit es in HTML komfortabler aussieht. Obwohl es sich nur um eine Beurteilungslogik handelt, sieht das natürlich nicht gut aus Nur eine persönliche Gewohnheit. Es ist intuitiv, Anweisungen direkt zu verwenden

<img v-attr="src: sex==&#39;male&#39;?&#39;images/male.png&#39;:&#39;images/female.png&#39;">
<img v-attr="src: sex | isM">

Der entsprechende Filter

filters: {
   isM: function (val) {
     return val == 'male' ? 'images/male.png' : 'images/female.pn'
   }
  }

Methode Es gibt viele, lassen Sie mich aufschreiben, was ich empfehle:

Zuallererst sind die Zeichen von Männern und Frauen dekorativer Inhalt, und ich Ich empfehle, sie in CSS zu schreiben. Mit anderen Worten: Verwenden Sie das Hintergrundbild, um echte Männer und Frauen zu steuern

Auf diese Weise haben Sie zwei Klassen.männlich weiblich

<span class={{sex}}></span>

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie Axios in Vue-Komponenten

Axios Post Submission Formdata-Instanz

Grundkenntnisse und Arbeitsprinzipien des Vue-Routers

Das obige ist der detaillierte Inhalt vonVue.js weist dem Quellcode von img dynamisch einen Wert zu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!