Vue.js attribue dynamiquement une valeur au src d'img

Maintenant, je vais partager avec vous une méthode Vue.js pour attribuer dynamiquement la valeur src de img. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Les exigences sont les suivantes :

ajax obtient les données comme suit

{
 "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"
}

Ensuite, affichez la liste sur la page. S'il s'agit d'un homme, définissez le src de img sur "images/male.png", sinon définissez-le sur "images/female.png". "

Les deux peuvent être implémentés. Afin de le rendre plus confortable en HTML, utilisez un filtre. Bien qu'il ne s'agisse que d'une logique de jugement, l'ajout de l'URL à l'instruction de jugement n'aura pas l'air bien. Bien sûr, c'est juste une habitude personnelle. Si vous utilisez la commande directement, ce sera le filtre correspondant

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

Il existe de nombreuses méthodes. , laissez-moi vous écrire ceux que je recommande :

Tout d'abord, les signes des hommes et des femmes sont des contenus décoratifs, je propose de les écrire en css. En d'autres termes, utilisez l'image d'arrière-plan pour contrôler de vrais hommes et femmes

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

De cette façon, vous avez deux classes: mâle femelle

Ce qui précède est que je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

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

Comment utiliser axios dans les composants vue

instance de données de formulaire de soumission de publication axios

Connaissances de base et principes de fonctionnement de vue-router

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!