微信小程序中多個button/view組件中進行切換時改變樣式

在小程序項目中遇到一個問題：數據分成四五個小組，然后要進行小組切換，切換的同時把button的樣式也要改變，以前Dom操作的時候特別簡單，

現在在小程序中竟不知從何下手，后面參照了這邊博文：http://blog.csdn.net/kelisentian/article/details/72793158，功能也能夠實現了，下面做下記錄：

 wxml代碼：

   <view  wx:for="{{Object}}" wx:key="Object" wx:for-index="key" wx:for-item="value">
      <view class="flex-item">
             <button  bindtap="changeGroup"  data-groupid="{{value.id}}" data-id="{{key}} type="{{key == id ? 'primary' : 'default'}}"> {{value.name}}</button>
      </view>
  </view>

css代碼：

.flex-item  button {
  height: 32px;
  box-sizing: border-box;
  text-align: center;
  margin: 10px 0 0 0;
  min-width: 50px;
  font-size: 16px;
  line-height: 32px;
}

js代碼：

data：{
    id:''
}

changeGroup: function(event){
    var id = event.currentTarget.dataset.id;
    .....
   this.setData({
         id: id
   });
}

結果：

默認為“全部”：

 

可任意切換其他button：

 

另外，值得注意的是，從數據庫里面取出的數據並沒有"全部"這一個對象，而是在請求數據成功之后再添加進去，並且這個對象的下標為是0，這樣的設置默認button的樣式比較好定義

代碼參考：

  changeGroup: function(event){
    var Object = []; 
    wx.request({
      url:'',
      header:{},
      data:{},
      method:"",
      success: function(res){
          if(res.data.state == 'success'){
           if(res.data.group.length >0){
              var obj = {};
              obj.id = '';
              obj.name = '全部';
              Object.push(obj);
           }
           for(var i = 0; i<res.data.group.length; i++){
             var o= {};             o.id = res.data.group[i].id;
             o.name = res.data.group[i].name;
             Object.push(o);
          }
            that.setData({
            Object: Object,
           });
    }
  })
}

好了。。。