动态返回数据，循环渲染img

1.需求:是一个下拉菜单，选中的高亮显示，带有图标的

2.难点：自己做的时候，图标的循环渲染，花费挺长时间

后天返回的是相应数据的对应图标的标识，比如家庭教育，后台就返回一个字段slug：jtjy，我在这边自己找jtjy对应的图标，

所以，我就先提前吧，这些图片，灰色的，高亮的，都定义在data里面

(注意：引入的图片名字还是你定义的图片名字都要和后台返回的对应)

（1）先imort导入所有图片

import jtjy from '@/assets/images/freeclass/jtjy.png'
import jtjylight from '@/assets/images/freeclass/jtjylight.png'

（2）

components: {
   jtjy,
   jtjylight
}

（3）data里面定义

dara () {
   return {
      obj:{jtjy:jyjy, jtjylight:jtjylight}
   }
}

（4）最后渲染（activeKey表示选中的data的id）

<li v-for="(category) in firstCategory" :key="category.id" :class="{'active': activeKey == category.id }" @click="selectcategory(category)">
              <img :src="activeKey == category.id ? obj[category.slug+'light'] : obj[category.slug]"/>
              <span>{{category.name}}</span>
</li>

 

转载于:https://my.oschina.net/u/3950671/blog/3089246