微信小程序——勾选实现数据隐藏和显示

筛选勾选：默认勾选过滤掉不满足的数据，取消勾选可显示所有的数据。
话不多说，直接看代码。。。。

.wxml：

<checkbox-group bindchange="mySort">
    <checkbox class="checkbox" id="weuiAgree" value="agree" checked="{{}}" />
</checkbox-group>
<text>原来数据：</text>
<view wx:for="{{arr}}" wx:key="id" wx:for-item="item" data-id="{{item.id}}" hidden='{{hiddenName}}'>
    <view>{{item.age}}</view>
</view>
<text>现在排序：</text>
<view wx:for="{{brr}}" wx:key="id" wx:for-item="item" data-id="{{item.id}}" wx:if="{{isAgree}}">
    <view>{{item.age}}</view>
</view>

.is：

Page({
  data: {
      arr: [
        {id:'0', age: '12' },
        {id:'1',  age: '24' },
        {id:'2', age: '28' },
        {id:'3', age: '18' },
        {id:'4', age: '36' },
      ],
      btn_disabled:false,
      hiddenName:false
  },
  mySort: function (e) {
    this.setData({
      hiddenName:!this.data.hiddenName
  })
    var arr = this.data.arr;
    var brr = [];
    console.log(arr)
    for (var i = 0; i<arr.length;i++){
        if(arr[i].age<25){
           brr[i] = arr[i]
        }
    }
    console.log("排序：",brr)
    this.setData({
        arr,
        brr
    })
    this.setData({
      isAgree:e.detail.value.length,
    })
    console.log("isAgree",e.detail.value.length)
    if (e.detail.value.length==0){
      console.log(this.data.btn_disabled)
     this.setData({
       btn_disabled:true,
     })
   }else{
     this.setData({
       btn_disabled:false,
     })
    } 
  },
})

效果图：