Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-06-01 15:26:48
original
2609 Les gens l'ont consulté

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>
Copier après la connexion
new Vue({
  el: "#test",
  data: function () {
    return {
      lists: [
        { img : &#39;img1&#39; },
        { img : &#39;img2&#39; },
        { img : &#39;img3&#39; },
        { img : &#39;img4&#39; }        
      ]
    }
  },
})
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal