v-for を使用して Vue を通じて src 属性に値を割り当てる方法 (詳細なチュートリアル)

ここで、Vue が v-for を使用して src 属性に値を割り当てる方法についての記事を共有します。これには優れた参照値が含まれており、皆さんのお役に立てれば幸いです。

私のコード構造は以下のコードに示すとおりであり、実行できません

<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' }        
      ]
    }
  },
})

imgのsrc属性ではMustache記法を使用できません

後で、vを使用した後、HTML内のコードを次のように変更しました

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

-bindタグ、普通に使えます

以上、皆さんの参考になれば幸いです。

関連記事:

JS で不規則な多次元配列のトラバーサルを実装する方法

Vue プロジェクトが eslint 検証を無効にする

vue でコード仕様の検出を削除する 2 つの方法

🎜

以上がv-for を使用して Vue を通じて src 属性に値を割り当てる方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。