vue实现点击当前标签高亮效果 之法

倦流年，韶华蹉跎，岁月如歌，时间流过。

效果如下

在data中定义即将渲染的数据，及active

data() {
  return {
   wpList: [
    {
     name: '食品饮料'
    },
    {
     name: '鲜花'
    },
    {
     name: '蛋糕'
    },
    {
     name: '水果生鲜'
    },
    {
     name: '服装鞋帽'
    },
    {
     name: '其它'
    }
   ],
   active:''
  }
 }

定义高亮的标签类名

.active {
        background:rgba(255,241,242,1) !important;
        border:1px solid rgba(235,70,84,1);
    }

动态渲染按钮的数据，并动态的增加active类名（当active为当前name值时添加），添加点击事件（点击时让active=name）

<li v-for=" (item, i) in wpList" :key="i" class="list" :class="{active : active == item.name}" @click="courseVideoLi(item.name)">
      <div class="listLeftBox">
          <span class="num">{{ i < 10 ?'0' + i : i}}</span>
          <span class="title">正常人为什么看不出腹肌看不出腹肌？</span>
      </div>
      <span v-if="active != item.name" class="novideoPlayImgBox"></span> <!-- 未选中状态 -->
      <span v-if="active == item.name" class="videoPlayImgBox"></span> <!-- 选中状态 -->
  </li>

在methods中定义点击事件函数

courseVideoLi(name) {
    this.active = name;
}

再此附上我的QQ: 2489757828 有问题的话可以找我共同探讨
我的私人博客: 李大玄