微信小程序 wx:for的使用实例详解
更新时间：2017年04月27日 10:46:57 作者：萌神哆啦A梦
这篇文章主要介绍了微信小程序 wx:for的使用实例详解的相关资料,需要的朋友可以参考下
微信小程序 wx:for的使用实例详解
在小程序的开发过程中，经常会用到在前端页面循环打印一个数组或者对象的数据，这样的话就需要用wx：for来实现。
一般情况下，小程序的utils这个文件夹下，我们可以把本地的数据写进去，封装成.js文件，提供对外暴露的接口，然后读取本地数据，这些在上一篇博客中有详细介绍。我们最后说到写好的本地数据可以另一个页面读取：
var fileData = require('../../utils/data.js')
Page({
data: {
showData: fileData.mtData().list,
},
})
在data{}中赋值后，showData就可以直接在wxml中显示了。接下来说下如何在wxml页面用wx:for循环显示数组，下面是示例：
<view class="item" wx:for="{{showData}}">
<view class="td">
{item.MTId}} {{item.status}}
</view>
</view>
wx：for = “”，“”中写当前小程序js页面中data的对象名。
实际效果图（并非上述代码实现）
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持！
相关文章
这篇文章主要介绍了 微信小程序 获取二维码实例详解的相关资料,需要的朋友可以参考下2017-06-06
这篇文章主要为大家介绍了js类型判断内部实现原理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要为大家介绍了前端对接WebSocket与心跳重连实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
TypeScript新语法之infer extends示例详解
这篇文章主要为大家介绍了TypeScript新语法之infer extends示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了微信小程序 选择器（时间，日期，地区）实例详解的相关资料,这里提供了实例代码及实现效果图，帮助大家学习理解这部分知识，需要的朋友可以参考下2016-11-11
这篇文章主要为大家介绍了Proxy的不可变数据优点及使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要给大家介绍的是JavaScript中的单例模式，设计模式代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案,需要的朋友可以参考一下2021-09-09
微信小程序 ES6Promise.all批量上传文件实现代码
这篇文章主要介绍了微信小程序 ES6Promise.all批量上传文件实现代码的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了Javascript 常见的高阶函数的相关资料，高阶函数，英文叫 Higher Order function。一个函数可以接收另外一个函数作为参数，这种函数就叫做高阶函数,需要的朋友可以参考一下2021-09-09
这篇文章主要介绍了微信小程序 闭包写法详细介绍的相关资料,需要的朋友可以参考下2016-12-12
最新评论