点击就高亮，可以点亮多个。但是点击了js处理变了状态dom节点并没有改变啊。。。第一次点击高亮第二次取消高亮

  <el-col :span="6" class="grade" v-for="(item,i) in classes" :key="item.clsid">

<div class="grid-content bg-purple" :class="{'active':kindex[i]==true}"  @click="changeGrade(item,i,$event)" ref="grade">{{item.classname}}</div>

</el-col>

就放一段代码演示：

首先这里的kindex是个数组。里面就是循环获得的.如果点击就把这个下标的数据变成true。

首先获取到kindex的初始值。他到底有几个还是看classes有几个。先全部赋值为false

this.kindex=this.classes.map(res=>{
                            return false;
            });

changeGrade(data,i,e){//切换班级
                this.kindex[i]=true;   //把点击的变成true
                this.$set(this.kindex,this.kindex);   、、这个是最重要的。因为dom没变你写这个就好啦   

//如果是点击第一次选中，第二次取消

                  this.kindex[i]=!this.kindex[i];
                 this.$set(this.kindex,i,this.kindex[i]);

}

如果你用 this.$set(this.chapterids,this.chapterids);不起作用。你可以把这个内容再循环一遍赋值。

    for(var j=0;j<this.chapterids.length;j++){
             this.$set(this.chapterids,j,this.chapterids[j]);                 
              }

好心累啊这样。找了半天才发现的解决办法。