Comment attribuer une valeur à l'attribut src via Vue en utilisant v-for (tutoriel détaillé)

Ci-dessous, je partagerai avec vous un article sur la façon dont Vue utilise v-for pour attribuer une valeur à l'attribut src. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

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

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

Articles connexes :

Méthode JS pour parcourir des tableaux multidimensionnels irréguliers

Le projet Vue désactive la vérification eslint

Deux façons de supprimer la détection de spécification de code dans vue

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!