v-forを使用してsrc属性に値を割り当てる方法

今回は、v-forを使用してsrc属性に値を代入する方法と、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 タグ、普通に使えます

この記事の事例を読んだ後は、この方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue.directive()の詳細な図解説明

Vueのレンダリングとプラグインのロードの操作順序

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