微信小程序点击增加类

直接上代码

wxml

<view class="kuang">

      <view class="kuai {{num== 1?'active':''}}" bindtap="btnbianse1">

         ￥1200及以下

      </view>

      <view class="kuai {{num == 2?'active':''}}" bindtap="btnbianse2">

         ￥1200-1600

      </view>

      <view class="kuai {{num== 3?'active':''}}" bindtap="btnbianse3">

         ￥1600以上

      </view>

    </view>

js

data{

num: 1,

},

  btnbianse1: function(){

    this.setData({

      num: 1

    });

  },

  btnbianse2: function(){

    this.setData({

      num: 2

    });

  },

  btnbianse3: function(){

    this.setData({

      num: 3

    });

  },

wxss

.kuang{

  width: 96%;

  margin: 20rpx auto;

  display: flex;

  justify-content: space-around;

  padding-bottom: 20rpx;

}

.kuang .kuai{

  width: 24%;

  padding: 15rpx;

  background-color: #eeeeee;

  color: #666666;

  border-radius: 10rpx;

  font-size: 0.8rem;

}

 .kuang .active{

  background-color: #000000;

  color: #ffffff;

}

 效果点击变色