ウィジェットwx:forレンダリングダイナミック切り替えスタイルを実装する

1.

 
    
       {{item.data_name}}
      {{item.name}}
     
     

.appointent-date-div {
display: inline-block;
width: 20%;
text-align: center;
margin-top: 30rpx;
}
.flex-item {
display: inline-block;
width: 96rpx;
 height: 88rpx;
 font-size: 26rpx;
 border: 2rpx solid #999;
 text-align: center;
 border-radius: 10rpx;
 color: #999;
 cursor: pointer;
 line-height: 30rpx;

}

.data_name {
 font-size: 36rpx;
 line-height: 52rpx;

}
.active-tag .flex-item {
 background: #c8321e;
 color: #fff;
 border: 1rpx solid #fff;

}

Page({
/**
4*  
5 */
data: {
dates: [
  { "data_name": "11", "name": " " },
  { "data_name": "12", "name": " " },
  { "data_name": "13", "name": " " },
  { "data_name": "14", "name": " " }
],
state: ''
},
select_date: function (e) {
 console.log(e.currentTarget.dataset.key);
this.setData({
  state: e.currentTarget.dataset.key,
})
}
})
//  （ ， ）
defaultstate(){
  this.setData({
    state:this.data.bankdata.length+1
  })
},
/**
 *  -- 
 */
onLoad: function (options) {
  this.defaultstate()
},