微信小程序修改data使页面数据实时更新的代码示例

需求：通过点击button修改dataList中checkResult的值并修改按钮状态。

a.wxml:

<view wx:for="{{dataList}}" wx:key='index' class='list-body'>   <view>     <view>编码：{{item.equipCode}}</view>     <view>设备：{{item.equipName}}</view>     <view>测项：{{item.checkItemName}}</view>   </view>   <!-- wx:if设置默认选中状态 -->   <view class='list-button' wx:if='{{item.checkResult=="正常"}}'>     <button bindtap='change' data-index='{{index}}' data-status='' class='add' style='color:#fff'>正常</button>     <button bindtap='change' data-index='{{index}}' data-status='异常'>异常</button>   </view>   <view class='list-button' wx:else>     <button bindtap='change' data-index='{{index}}' data-status='正常'>正常</button>     <button bindtap='change' data-index='{{index}}' data-status='异常' class='add' style='color:#fff'>异常</button>   </view> </view>

a.js

Page({     data:{         dataList:[             {'equipCode':1001,'equipName':'打印机','checkItemName':'记录',checkResult:'正常'},             {'equipCode':1002,'equipName':'打印机','checkItemName':'记录',checkResult:'异常'},             {'equipCode':1003,'equipName':'打印机','checkItemName':'记录',checkResult:'正常'},             {'equipCode':1004,'equipName':'打印机','checkItemName':'记录',checkResult:'异常'},             {'equipCode':1005,'equipName':'打印机','checkItemName':'记录',checkResult:'正常'}         ]     },     change: function(e) {         var changeData = 'dataList['+e.target.dataset.index+'].checkResult';         if (e.target.dataset.status == '正常') {           this.setData({             [changeData]: '正常'//修改状态，前端页面数据也会改变           })         } else {           this.setData({             [changeData]: '异常'           })         }     }, })

以上就是微信小程序修改data使页面数据实时更新的代码示例的详细内容，更多内容请关注技术你好其它相关文章！