循环按钮的控制

目标：通过for循环接受数据并生成了一系列的按钮，需要实现点击某个按钮然后改变这个按钮的状态(样式)。
问题：在使用时发现通过常规的绑定样式类修改的方式，由于for循环生成的button绑定的是同一个class变量名，因此会出现点击一个按钮结果其他按钮同样会发生改变的问题。例如：

html:
<block wx for="data">
<button class="{{button-class}}" bindtap="changeClass"></button>
</block>

js:
changeClass(event){
this.setData({button-class:this.data.button-class=="button-a"?"button-b":"button-a"})
}

css:
.button-a {
  background: white;
  color: black
}
.button-b {
  background: black;
  color: white
}

解决方案：
使用两个button按钮来替代之前一个button，这两个button分别具有a、b两种样式，通过wx:if判断当前显示哪一个button。

html:
<block wx:for="{{button_data}}">
  <button class="button-a" data-index="{{index}}" wx:if="{{button_status[index]==1}}" bindtap="func1">{{item}}</button> 
  <button class="button-b" data-index="{{index}}" wx:if="{{button_status[index]==0}}" bindtap="func1">{{item}}</button>
</block>

js:
Page({
  data: {
    button_data: ["aaa", "bbb", "ccc"],//按钮数据
    button_status:[]//按钮状态
  },

  onLoad: function (options) {
    if (this.data.button_status.length == 0) {
      this.setData({ button_status: this.data.button_data.map(t => Number(t === t)) })}//判断按钮状态是否初始化，将其初始化为值全为1的列表
  },

  func1(event){
    var buttondata_tmp = this.data.button_data
    var buttonstatus_tmp =this.data.button_status
    const index = event.currentTarget.dataset.index //选中的按钮id
    buttonstatus_tmp[index] > 0 ? buttonstatus_tmp[index] = 0 : buttonstatus_tmp[index]=1 //将选中的按钮状态反向，原来为0则变为1，原来为1则改变为0
    this.setData({ button_status: buttonstatus_tmp})//重新设置按钮状态值
  }
})

css:
.button-a {
  background: #333333;
  color: #eeeeee
}
.button-b {
  background: #eeeeee;
  color: #333333
}