背景:图片为本地资源,根据后台返回的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");
},

 

Logo

前往低代码交流专区

更多推荐