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

 这是wxml代码：

<view class='choose' >
      <text>规格</text>
      <view class="buttonview">
        <view wx:for="{{choose}}" bindtap='click' data-id="{{index}}">
          <button class='button' style="{{index == id?'background-color:#85d01d;color:#fff':'background-color:#eee;color:#767676'}}">{{item.specifications}}</button>
      <!-- <button class='button'>小份</button> -->
        </view>
      </view>
    </view>
//style="{{index == id?'background-color:#85d01d;color:#fff':'background-color:#eee;color:#767676'}}" 切换样式

<view class='choose'>
      <text>口味</text>
      <view class="buttonview">
        <view wx:for="{{taste}}" bindtap='onclick' data-idx="{{index}}">
          <button class='button' style="{{index == idx?'background-color:#85d01d;color:#fff':'background-color:#eee;color:#767676'}}">{{item.yourtaste}}</button>
        </view>
        </view>
      </view>

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(即获取当前组件)
    })
  },

结果如图：