点击循环出来的div，切换被点击div的背景，第一次点击时高亮第二次点击时恢复，不影响别的div点击时的高亮和恢复

皮蛋瘦肉-周

于 2024-12-29 19:16:04 发布

阅读量128

点赞数 2

CC 4.0 BY-SA版权

文章标签： css3 css javascript

本文链接：https://blog.youkuaiyun.com/weixin_53501854/article/details/144808694

<ul class="cycle_class">
    <li
      v-for="(item, index) in cycledata"
      :key="index"
      @click="cycleClick(index)"
      :class="{ btnActive: selectedBtns[index] }"
    >
      {{ item.name }}
    </li>
  </ul>

在data中初始化
selectedBtns: Array(7).fill(false)

点击方法
cycleClick(index) {
   this.$set(this.selectedBtns, index, !this.selectedBtns[index]);
},

样式
.cycle_class {
  display: flex;
  width: 420px;
  border: 1px solid rgba(142, 213, 241, 0.2);
  border-radius: 2px;
  box-sizing: border-box;
  cursor: pointer;

  li {
    width: 60px;
    height: 30px;
    text-align: center;
    background: rgba(47, 71, 109, 0.8);
    border-right: 1px solid rgba(142, 213, 241, 0.2);
    font-size: 12px;
    font-weight: normal;
    line-height: 30px;
    color: #819cb9;
  }

  .btnActive {
    background: #418dff;
    color: #ffffff;
  }
}