微信小程序中多个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,
           });
    }
  })
}

好了。。。