css元素点击后变色，且点击别的地方不会颜色消失

效果：

一、首先如果你的需求是点击元素变色就可以了，可以用第一种方法

//普通元素类似button按钮不用 tabindex=“1”，由于div不支持:focus伪类，可通过增加tabIndex属性使其支持:focus

 <div v-for="(item,index) in tableData" :key="index" class="fontStyle" tabindex="1" >
   	<div @click="systemChange(item,index)" >{{ item.system }}</div>
 </div>

css：

fontStyle:focus{
	color:#0C5ACF;
}

二、元素变色后点击其他地方保留颜色

首先在data中加入selectedIndex：0；
其次：

<div v-for="(item,index) in tableData" :key="index" class="fontStyle" tabindex="1" >
   <div :class="selectedIndex == index ? 'active':''" @click="systemChange(item,index)" class="lineStyle">{{ item.system }}</div>
</div>

js：

systemChange(val,index){
      this.selectedIndex = index;
},

css：

.lineStyle.active {
  color:#0C5ACF;
}