## 定义div和单击事件
<template v-for="item in groupList">
      <div
          class="test1"
          :class="item.id==index?'hover':''"
          @click="groupClick(item.id)"
        >
          {{item.name}}
        </div>
</template>

## 样式和选中后样式
.test1 {
  width: 100%;
  height: 100%;
  background: #41b883;
}
.test1.hover {
  border: 2px solid blue;
}

## 获取选中id改变index
groupClick (e) {
this.index = e
}

效果如下,自己可以在hover里面自定义选中后样式

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐