So weisen Sie dem src-Attribut mit v-for einen Wert zu

Dieses Mal zeige ich Ihnen, wie Sie v-for verwenden, um dem Attribut src einen Wert zuzuweisen, und welche Vorsichtsmaßnahmen es gibt, um v-for zum Zuweisen eines Werts zu verwenden zum src-Attribut Das Folgende ist ein praktischer Fall.

Die Struktur meines Codes ist wie im folgenden Code gezeigt, 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. Ich werde es wie folgt ändern

<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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Informationen achten Sie bitte auf andere php-chinesische Websites. Verwandte Artikel!

Empfohlene Lektüre:

Detaillierte grafische Erklärung von Vue.directive()

Die Reihenfolge der Bedienung von Vue-Rendering und Plug -in wird geladen

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