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

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!