data () {
return {
orderList: [
{ icon: 'message', info: '我的消息' },
{ icon: 'pointer', info: '积分商城' },
{ icon: 'vip', info: '会员卡' }
],
serviceList: [
{ icon: 'cart', info: '我的购物车' },
{ icon: 'cart', info: '下载购物APP' }
]
}
},
1.假数据icon里为图片文件名字
<div id="list">
<div v-for="(item, index) in listData" :key="index" class="item" @click="itemClick(index)">
<img :src="require(`assets/img/profile/${item.icon}.svg`)" alt="">
<span class="info">{{item.info}}</span>
</div>
</div>
利用模板字符串进行拼接