微信小程序：按钮之间的样式切换选择

 这是wxml代码：

      规格
      
        
          {{item.specifications}}
      
        
      
    
//style="{{index == id?'background-color:#85d01d;color:#fff':'background-color:#eee;color:#767676'}}" 切换样式


      口味
      
        
          {{item.yourtaste}}
        
        
      

wxss:

.buttonview{
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
}
.button{
  float: right;
  margin-top: 20rpx;
  background-color:#eee;
  width: 120rpx;
  height: 50rpx;
  font-size: 28rpx;
  color: rgb(252, 252, 252);
  text-align: center;
  line-height: 50rpx;
  margin-right: 20rpx;
}
.choose{
  position: absolute;
  left: 0;
  padding: 20rpx 50rpx;
  font-size: 36rpx;
  font-weight: 600;
}

js里面：

click: function (e) {
    var ids = e.currentTarget.dataset.id;  //获取自定义的id   
    this.setData({
      id: ids,  //把获取的自定义id赋给当前组件的id(即获取当前组件)
    })
  },
  onclick: function (e) {
    var ida = e.currentTarget.dataset.idx;  //获取自定义的id   
    this.setData({
      idx: ida,  //把获取的自定义id赋给当前组件的id(即获取当前组件)
    })
  },

结果如图：