微信小程序实现按钮数组单击更改颜色

按钮数组单击更改颜色，是每个移动app都可见到的功能，具体功能见下图：单机某个按钮，按钮选中并突出绿色。虽然这个功能看起来简单，但网上确实未找到很形象表述的教程，所以我想写一篇很短小的文章介绍该如何实现。

实现的wxml如下：

<view style="display:flex; flex-direction: row;justify-content: space-between;">  
    <button class="Cbtn"  wx:for="{{anniu}}" wx:key='this' data-index='{{index}}' style="{{index===colorIndex? 'background:#7CCD7C':'background:#FFF'}}" type="default" bindtap="genghuan">{{item}}</button>
</view>  

实现的js代码如下：

Page({
    data: {  
        anniu:['女声','男声','度逍遥','度丫丫'],                                      
    },
    genghuan: function(e){
       this.setData({ colorIndex:e.currentTarget.dataset.index});
        },

})

具体内容也需要过多解释，很好理解。同时wxml代码已实现wxss的功能，渲染也可以做的更好看，感兴趣的小伙伴们可以研究一下。