vue中给v-for循环里的指定内容加样式、以及给点击的a标签加高亮

需求

流程图与其余5个标签对齐，以及点击不同a标签时给其加高亮

实现

1、流程图与其余5个标签对齐，重点语句 :class=“‘iconName’+(index+1)”
2、点击不同a标签时给其加高亮，重点语句 :class="activeNum === index ? ‘active’:’ ’ "

<!-- 左侧 “资产卡片、流程图、用户手册、检修资料、教学视频、现场视频” -->
<div class="center-left" v-show="showButton">
	<a :href="item.href" v-for="(item,index) in buttonList" :class="activeNum === index ? 'active':''" @click="selected(index)" :key="index"  target="_blank"><i :class="'iconName'+(index+1)">{{item.icon}}</i>{{item.name}}</a>
</div>

初始化

data() {
    return {
    	// 六个按钮
      	activeNum:"0"
    }
  }

方法

methods: {
	// 六个按钮点击高亮
    selected(index){
      	this.activeNum = index;
    }
}

css

//流程图样式
//因为我只需要给第二个i标签加特殊样式 所以css写法如下
.iconName2{
	margin-left: -14px;
}
//点击a标签时高亮样式
.active {
	display: block;
	background-color: #0083ff;
	transition: background-color 300ms;
	border: 1px solid #0072d1;
}

最终效果图如下