微信小程序怎么更新页面中的data


微信小程序更新页面中data的案例:

在对应的.wxml文件中添加以下代码:

<viewwx:for="{{dataList}}"wx:key='index'class='list-body'>

<view>

<view>编码:{{item.equipCode}}</view>

<view>设备:{{item.equipName}}</view>

<view>测项:{{item.checkItemName}}</view>

</view>

<!--wx:if设置默认选中状态-->

<viewclass='list-button'wx:if='{{item.checkResult=="正常"}}'>

<buttonbindtap='change'data-index='{{index}}'data-status=''class='add'style='color:#fff'>正常</button>

<buttonbindtap='change'data-index='{{index}}'data-status='异常'>异常</button>

</view>

<viewclass='list-button'wx:else>

<buttonbindtap='change'data-index='{{index}}'data-status='正常'>正常</button>

<buttonbindtap='change'data-index='{{index}}'data-status='异常'class='add'style='color:#fff'>异常</button>

</view>

</view>

在对应的.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){

varchangeData='dataList['+e.target.dataset.index+'].checkResult';

if(e.target.dataset.status=='正常'){

this.setData({

[changeData]:'正常'//修改状态,前端页面数据也会改变

})

}else{

this.setData({

[changeData]:'异常'

})

}

},

})


上一篇:mysql怎么使用事务修改表

下一篇:iptable如何防御ddos


微信小程序 小程序 data
Copyright © 2002-2019 测速网 www.inhv.cn 皖ICP备2023010105号
测速城市 测速地区 测速街道 网速测试城市 网速测试地区 网速测试街道
温馨提示:部分文章图片数据来源与网络,仅供参考!版权归原作者所有,如有侵权请联系删除!

热门搜索 城市网站建设 地区网站制作 街道网页设计 大写数字 热点城市 热点地区 热点街道 热点时间 房贷计算器