广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

这次给大家带来如何用v-for给src属性赋值，用v-for给src属性赋值的注意事项有哪些，下面就是实战案例，一起来看一下。

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

<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标签后，就可以正常使用了

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

推荐阅读：

Vue.directive()的图文详解

操作Vue渲染与插件加载的顺序

以上就是如何用v-for给src属性赋值的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~