uniapp-点击激活样式

scss激活样式代码

 .item_class {
        text-align: center;
        height: 60px;
        line-height: 60px;

        &.active {
          background-color: rgb(252, 228, 228);
          position: relative;

          &::before {
            content: '';
            display: inline-block;
            border-left: 5px solid red;
            height: 30px;
            top: 50%;
            transform: translateY(-50%);
            left: 0%;
            position: absolute;

          }
        }
      }

1.判断判定样式

  <view class="item_class" 
       :class="{active:index===active}" 
       @click="handle(index)">{{item.cat_name}}</view>

2.定义数据，设置点击事件

date(){
   return{
  active: 0,//激活样式
  }
},

  handle(i) {
        // 激活样式
        this.active = i
}