Vue中使用v-for给img中的src属性赋值
在学习Vue的时候,使用v-for获取Vue data中的数据,img中src属性使用{{}}获取,报错。<div id="app"><div v-for="book in list"><img src="{{book.bookImg}}">//并不会读取
·
在学习Vue的时候,使用v-for获取Vue data中的数据,img中src属性使用{{}}获取,报错。
<div id="app">
<div v-for="book in list">
<img src="{{book.bookImg}}"> //并不会读取到
</div>
</div>
new Vue({
el:"#app",
data:{
"totalMoney":100,
"list":[
{
"bookId":"200001",
"bookName":"目送",
"bookPrice":30,
"bookQuantity":1,
"bookImg":"img/book-1.jpg"
}
}
});
错误之处在于:
属性值数据绑定应该用v-bind,应该写成v-bind:src=""或者:src=""
将上述html修改为
<div id="app">
<div v-for="book in list">
<img v-bind:src="book.bookImg"> //ok
</div>
</div>
更多推荐
已为社区贡献1条内容
所有评论(0)