微信小程序 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的对象名。

实际效果图（并非上述代码实现）

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持！

您可能感兴趣的文章:

前端使用xlsx库导出带有样式的excel文件
这篇文章主要为大家介绍了前端使用xlsx库导出带有样式的excel文件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
arcgis js完整悬停效果实现demo
这篇文章主要为大家介绍了arcgis js完整悬停效果实现demo详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
Google 地图事件实例讲解
本文主要讲解Google 地图事件,这里整理了Google地图基本事件功能，并提供代码示例以供大家参考，有需要的小伙伴可以参考下
2016-08-08
前端通过JavaScript创建修改CAD图形详情
这篇文章介绍JavaScript创建修改CAD图形，创建修改CAD图形，一般是基于AutoCAD进行二次开发，ObjectARX是AutoDesk公司针对AutoCAD平台上的二次开发而推出的一个开发软件包，它提供了以C++为基础的面向对象的开发环境及应用程序接口，能真正快速的访问AutoCAD图形数据库
2021-10-10
详解微信小程序登录获取unionid
这篇文章主要介绍了详解微信小程序登录获取unionid的相关资料,需要的朋友可以参考下
2017-06-06
微信小程序 navbar实例详解
这篇文章主要介绍了微信小程序 navbar实例详解的相关资料,需要的朋友可以参考下
2017-05-05
前端的状态管理（上）
这篇文章主要讲解前端的状态管理，状态管理李娜就想到：Vuex、Redux、Flux、Mobx等等方案，不论哪种方案只要内容一多起来似乎都是令人头疼的问题，今天来聊一聊前端的状态管理，感兴趣的小伙伴可以参考参考下面文字具体内容
2021-10-10
webpack5之output和devServer的publicPath区别示例详解
这篇文章主要为大家介绍了webpack5之output和devServer的publicPath区别示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
微信小程序地图map详解及简单实例
这篇文章主要介绍了微信小程序地图map详解及简单实例的相关资料,需要的朋友可以参考下
2017-01-01
JS SVG获取验证码的玩法示例
这篇文章主要为大家介绍了JS SVG获取验证码的玩法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07