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

时间:2022-12-06 01:17

微信小程序怎么更新页面中的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]:'异常'

})

}

},

})

标签:
随便看看
本类推荐
本类排行
热门标签

我国国家通讯社行不行啊细狗新年贺词祝福语2023年祝福语新年新年贺词新年贺词祝福语居家抗病毒小药箱除夕高速免费吗2022年除夕高速免费吗春联春联句子大全春联句子大全七字年夜饭十二道菜年夜饭十二道菜单年夜饭吃什么年夜饭吃什么菜吃年夜饭的寓意年夜饭黑芝麻菊花茶晒菊花茶腌腊肉送妈妈生日礼物汉白玉送闺蜜水钻送女人礼物爸爸生日送礼物送老公