Heim  >  Artikel  >  Web-Frontend  >  So weisen Sie dem src-Attribut über Vue mit v-for einen Wert zu (ausführliches Tutorial)

So weisen Sie dem src-Attribut über Vue mit v-for einen Wert zu (ausführliches Tutorial)

亚连
亚连Original
2018-06-01 15:26:482616Durchsuche

Im Folgenden werde ich einen Artikel darüber teilen, wie Vue v-for verwendet, um dem src-Attribut einen Wert zuzuweisen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Meine Codestruktur ist wie im folgenden Code dargestellt, der nicht ausgeführt werden kann. Die Schnurrbart-Notation kann nicht im src-Attribut in img verwendet werden

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

Später habe ich den Code in HTML in geändert Folgendes

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

Nachdem Sie das V-Bind-Tag verwendet haben, können Sie es normal verwenden

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

JS-Methode zum Durchlaufen unregelmäßiger mehrdimensionaler Arrays

Vue-Projekt deaktiviert Eslint-Überprüfung

Zwei Möglichkeiten zum Entfernen der Codespezifikationserkennung in Vue

Das obige ist der detaillierte Inhalt vonSo weisen Sie dem src-Attribut über Vue mit v-for einen Wert zu (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn