列表点击高亮（个人笔记）

鼠标悬浮及点击选中后背景高亮

 :class="active == index ? 'height-style-1' : 'height-style-2'"

"动态绑定样式.

@click="isClick(index)" 通过索取下标

<div
  class="event"
  :class="active == index ? 'height-style-1' : 'height-style-2'"
  @click="isClick(index)"
  v-for="(item, index) in eventType"
  :key="index"
>
  <div class="event-type" @click="eventTypeClick(item.value)">
    {{ item.label }}
  </div>
</div>

js：代码

trun{

active: 0, //默认0

}

// 背景点击高亮
isClick(index) {
  this.active = index
}

style样式

 // 高亮样式

      .height-style-1 {

        .event-type {

          padding: 10px 0px 5px 10px;

          font-size: 14px;

          font-weight: 200;

          margin-bottom: 5px;

          background: linear-gradient(to right, #0e74d0, #5053fb);

//悬浮高亮

          &:hover {

            background: linear-gradient(to right, #0e74d0, #5053fb);

          }

        }

      }

      // 默认颜色

      .height-style-2 {

        .event-type {

          background: transparent;

        }

      }