vue之img标签:src地址拼接 --随记
背景:图片为本地资源,根据后台返回的icon(图片名字/标记)匹配本地图片。代码:(假数据)<template><div><ul class="gift_main_list" v-if="tabIndex == 1"><li class="list_i
·
背景:图片为本地资源,根据后台返回的icon(图片名字/标记)匹配本地图片。
代码:(假数据)
<template>
<div>
<ul class="gift_main_list" v-if="tabIndex == 1">
<li class="list_item" v-for="(item,index) in giftList"
v-if="item.type == 0"
:class="itemActive == item.id ? 'active' : ''"
@click="giftChange(item)"
:key="index">
<i><img :src="getImgUrl(item.icon)"></i>
<span>{{item.name}}</span>
</li>
</ul>
</div>
</template>
data () {
return {
giftList:[
{ id : 1 ,type : 0 ,price : 170 ,icon : 'tv1' ,name : 'vip/年'},
{ id : 2 ,type : 0 ,price : 160 ,icon : 'tv2' ,name : 'vip/年'},
{ id : 3 ,type : 1 ,price : 150 ,icon : 'tv3' ,name : 'vip/年'},
{ id : 4 ,type : 1 ,price : 140 ,icon : 'tv4' ,name : 'vip/年'},
{ id : 5 ,type : 1 ,price : 130 ,icon : 'tv5' ,name : 'vip/年'},
],
}
},
//获取图片地址
getImgUrl(icon){
return require("@/assets/images/tvlogo/"+icon+".png");
},
更多推荐
已为社区贡献8条内容
所有评论(0)