微信小程序点击添加class类名，再点击移除（取消）class（即切换class类名）

需求

• 点击按钮添加class类名（选中单个按钮）
• 再点击原先选中的，移除类名（取消选中）
  

代码实现

wxml
如果currentBtn等于index，类名为btn-active，反之为btn

  <view class="btn-box">
    <view wx:for="{{timeOptions}}" bindtap="changeTime" data-index="{{index}}" wx:key="index" class="{{currentBtn==index?'btn-active':'btn'}}">{{item}}</view>
  </view>

wxss

.btn-box{
  display: flex;
  justify-content: space-around;
  padding: 15rpx;
}
/* 默认 不选中 */
.btn{
  padding:10rpx 25rpx;
  border: 1rpx solid #5677FC;
  border-radius: 30rpx;
  color: #5677fc;

}
/* 选中 */
.btn-active{
  padding:10rpx 25rpx;
  border-radius: 30rpx;
  background-color: #5677FC;
  color: #fff;
}

js
currentBtn等于-1 为不选中状态，等于当前点击的index则加上btn-active类名

  data: {
    timeOptions: ['北京', '上海', '广州', '深圳'],
    currentBtn: -1 // -1 默认不选中
  },
  changeTime(e) {
    if (this.data.currentBtn == e.currentTarget.dataset.index) {
      // 再点一下 取消选中
      this.setData({
        currentBtn: -1
      })
    } else {
      this.setData({
        currentBtn: e.currentTarget.dataset.index
      })
    }

  }