在小程序项目中遇到一个问题：数据分成四五个小组，然后要进行小组切换，切换的同时把button的样式也要改变，以前Dom操作的时候特别简单，
现在在小程序中竟不知从何下手，后面参照了这边博文：/kelisentian/article/details/72793158，功能也能够实现了，下面做下记录：
wxml代码：
1 <view wx:for="{{Object}}" wx:key="Object" wx:for-index="key" wx:for-item="value">2 <view class="flex-item">3 <button bindtap="changeGroup" data-groupid="{{value.id}}" data-id="{{key}} type="{{key == id ? 'primary' : 'default'}}"> {{value.name}}</button>4 </view>5 </view>
css代码：
1 .flex-item button {2 height: 32px;3 box-sizing: border-box;4 text-align: center;5 margin: 10px 0 0 0;6 min-width: 50px;7 font-size: 16px;8 line-height: 32px;9 }
js代码：
1 data：{2id:''3 }
1 changeGroup: function(event){2var id = event.currentTarget.dataset.id;3.....4 this.setData({5id: id6 });7 }
结果：
默认为“全部”：
可任意切换其他button：
另外，值得注意的是，从数据库里面取出的数据并没有"全部"这一个对象，而是在请求数据成功之后再添加进去，并且这个对象的下标为是0，这样的设置默认button的样式比较好定义
代码参考：
1 changeGroup: function(event){ 2var Object = []; 3wx.request({ 4 url:'', 5 header:{}, 6 data:{}, 7 method:"", 8 success: function(res){ 9 if(res.data.state == 'success'){10 if(res.data.group.length >0){11var obj = {};12obj.id = '';13obj.name = '全部';14Object.push(obj);15 }16 for(var i = 0; i<res.data.group.length; i++){17 var o= {}; o.id = res.data.group[i].id;18 o.name = res.data.group[i].name;19 Object.push(o);20 }21 that.setData({22 Object: Object,23 });24}25 })26 }
好了。。。
