Maison  >  Article  >  interface Web  >  Comment attribuer une valeur à l'attribut src à l'aide de v-for

Comment attribuer une valeur à l'attribut src à l'aide de v-for

php中世界最好的语言
php中世界最好的语言original
2018-03-27 15:58:192249parcourir

Cette fois, je vais vous montrer comment utiliser v-for pour attribuer une valeur à l'attribut src , et quelles sont les précautions pour utiliser v-for pour attribuer une valeur à l'attribut src. Ce qui suit est un cas pratique.

La structure de mon code est celle indiquée dans le code ci-dessous, qui ne peut pas être exécuté. La notation moustache ne peut pas être utilisée dans l'attribut src dans img

<p id="test">
  <p v-for="item in lists">
    <img src="{{item.img}}">
  </p>
</p>
new Vue({
  el: "#test",
  data: function () {
    return {
      lists: [
        { img : 'img1' },
        { img : 'img2' },
        { img : 'img3' },
        { img : 'img4' }        
      ]
    }
  },
})

Plus tard, Je vais le changer comme suit

<p id="test">
  <p v-for="item in lists">
    <img v-bind:src="item.img">
  </p>
</p>

Après avoir utilisé la balise v-bind, vous pouvez l'utiliser normalement

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Explication graphique détaillée de Vue.directive()

L'ordre de fonctionnement du rendu et du plug de Vue -en chargement

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn