这个数据是新增的时候保存的,这里只是从数据库读取出来显示。
示例如下
<div id="app">
<table border="1">
<tr><th>学号</th><th>姓名</th><th>性别</th><th>照片</th></tr>
<tr v-for="item in list"><td>{{item.no}}</td><td>{{item.name}}</td><td>{{item.sex}}</td><td><img :src="item.img" /></td></tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
list: [
{ no: '001', name: '学生1', sex: '男', img: 'https://avatar.csdnimg.cn/0/0/4/4_weixin_46216203_1631631703.jpg' },
{ no: '002', name: '学生2', sex: '男', img: 'https://avatar.csdnimg.cn/D/4/8/2_technologist_40_1621503911.jpg' },
],
list2: [1, 2, 3]
}
})
</script>
有帮助麻烦点下【采纳该答案】,谢谢~~有其他问题可以继续交流~
td里 img src="图片路径就可以"
我的理解是动态给已经获取的数组中每一项添加一张图片,以下作为参考,如有帮助请点采纳
arr1: [
{
name: 'john',
sexual: 'male'
},
{
name: 'nark',
sexual: 'male'
},
{
name: 'mary',
sexual: 'female'
}
],
arrAdd: ['J', 'N', 'M']
this.arr1.map((item, index) => {
item.nickName = this.arrAdd[index]
})