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）

      

          {{ i < 10 ?'0' + i : i}}
          正常人为什么看不出腹肌看不出腹肌？
      
       
       
  

在methods中定义点击事件函数

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

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