Maison >interface Web >js tutoriel >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=='male'?'images/male.png':'images/female.png'"> <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 femmesfilters: { 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!