如何用v-for给src属性赋值

时间2024-01-23 09:13:34发布访客分类HTML浏览666

导读：收集整理的这篇文章主要介绍了如何用v-for给src属性赋值，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来如何用v-for给src属性赋值，用v-for给src属性赋值的注意事项有哪些，下面就是实战案例，一起来看一下。我的...

收集整理的这篇文章主要介绍了如何用v-for给src属性赋值，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来如何用v-for给src属性赋值，用v-for给src属性赋值的注意事项有哪些，下面就是实战案例，一起来看一下。

我的代码结构如下面代码所示，无法执行，在img中的src属性中无法用Mustache表示法

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

后来我将htML中的代码改成如下

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

使用v-bind标签后，就可以正常使用了

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！