如何在Vue模板template动态中引入图片

如何在Vue模板template动态中引入图片

let main_a ={ template:` <main> <div v-for="(item,index) in list"> <ul> <li><img v-bind:src="item.mySrc"></li> <li> <h4>{{item.listTitle}}</h4> <p class="cnt"><span>{{item.listContent}}</span><span>{{item.listMoney}}</span></p> <p class="time">{{item.listTime}}</p> </li> </ul> </div> </main> `, data(){ return{ list:[ { mySrc:"https://www.lgstatic.com/i/image/M00/23/AC/Cgp3O1cYSLeAKJQgAAENKq5RGDY571.jpg", listTitle:"创建科技", listContent:"JAVA开发主管 [ 杭州 ]", listMoney:"10k-12k", listTime:"今天 17:07", }, ] } } }

重要点：需要在模板中的li中用到v-bind属性

<li><img v-bind:src="item.mySrc"></li>

css html代码不粘了， js完整代码

let main_a ={ template:` <main> <div v-for="(item,index) in list"> <ul> <li><img v-bind:src="item.mySrc"></li> <li> <h4>{{item.listTitle}}</h4> <p class="cnt"><span>{{item.listContent}}</span><span>{{item.listMoney}}</span></p> <p class="time">{{item.listTime}}</p> </li> </ul> </div> </main> `, data(){ return{ list:[ { mySrc:"https://www.lgstatic.com/i/image/M00/23/AC/Cgp3O1cYSLeAKJQgAAENKq5RGDY571.jpg", listTitle:"创建科技", listContent:"JAVA开发主管 [ 杭州 ]", listMoney:"10k-12k", listTime:"今天 17:07", }, { mySrc:"https://www.lgstatic.com/i/image/M00/84/EC/CgqKkVhfhp2APcR8AAB6n_Ah3zc236.jpg", listTitle:"创客家科技", listContent:"【实习生】游戏原画设计师助理 [ 深圳 ]", listMoney:"6k-8k", listTime:"今天 00:59", }, ] } } } let vm = new Vue({ el:"#app", data:{}, components:{ "main_a":main_a, } })

最后效果