在学习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>