【技术分享】Vue中使用v-for给img中的src属性赋值

 

问题

在我们之前使用v-for的时候习惯性使用 {{item.id}}对其进行输出值

<div id="app">

<div v-for="item in list">

<img src="{{item.itemImg}}"> //并不会读取到

</div>

</div>

如上所示，当我们需要用值来给src属性赋值时就遇到了一点点小困难

因为我们需要每次都为src重新赋值 所以 直接为src赋值 指定是错误的

解决方式

所以我们就需要使用v-bind动态绑定数据 每次都重新为src进行赋值

将上述html修改为

<div id="app">

<div v-for="item in list">

<img v-bind:src="item.itemImg"> //ok

</div>

</div>

或

<div id="app">

<div v-for="item in list">

<img :src="item.itemImg">

</div>

</div>