vue ul列表当前选中项高亮的一个变相用法_vue勾选选项高亮

1.问题描述
需求是对于列表中的图片，需要做到当前选中项高亮，这里需要改变的是背景图，和平时做的稍微有点不一样，不难但是也卡了我几分钟，现在记录一下
2.代码
html结构

<ul class="city_img">
        <li
          v-for="(item,index) in citymapList"
          :key="index"
          :style="{'margin-left' : index == 6 ? '125px' : ''}"
          @click="itemClick(item,index)"
        >
          <div>{{ item.name }}</div>
          <img :src="currentCityIndex === index ? item.activeImg: item.img " alt="" />
        </li>
      </ul>
1
2
3
4
5
6
7
8
9
10
11

主要就是img的src属性动态指定，根据当前的index来判断，如果为当前选中的index，则高亮，高亮图片提前在保存数据的变量中导入。

citymapList: [
        {
          name: "杭州",
          areaId: "330100",
          img: require("../images/hangzho1.png"),
          activeImg:require("../images/hangzho2.png"),
        },
        
        ............
1
2
3
4
5
6
7
8
9

每一项li点击时的代码

3.补充：
值得记录一下的是，css有时可以灵活使用，flex布局可以结合margin等属性使用，比如下面这种布局可以使用flex结合index及margin完成