動態返回數據，循環渲染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>