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>