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

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 : 'img1' },
        { img : 'img2' },
        { img : 'img3' },
        { img : 'img4' }        
      ]
    }
  },
})

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!