微信小程序 wx:for的使用實例詳解
更新時間：2017年04月27日 10:46:57 作者：萌神哆啦A夢
這篇文章主要介紹了微信小程序 wx:for的使用實例詳解的相關(guān)資料,需要的朋友可以參考下
微信小程序 wx:for的使用實例詳解
在小程序的開發(fā)過程中，經(jīng)常會用到在前端頁面循環(huán)打印一個數(shù)組或者對象的數(shù)據(jù)，這樣的話就需要用wx：for來實現(xiàn)。
一般情況下，小程序的utils這個文件夾下，我們可以把本地的數(shù)據(jù)寫進去，封裝成.js文件，提供對外暴露的接口，然后讀取本地數(shù)據(jù)，這些在上一篇博客中有詳細(xì)介紹。我們最后說到寫好的本地數(shù)據(jù)可以另一個頁面讀?。?/p>
var fileData = require('../../utils/data.js')
Page({
data: {
showData: fileData.mtData().list,
},
})
在data{}中賦值后，showData就可以直接在wxml中顯示了。接下來說下如何在wxml頁面用wx:for循環(huán)顯示數(shù)組，下面是示例：
<view class="item" wx:for="{{showData}}">
<view class="td">
{item.MTId}} {{item.status}}
</view>
</view>
wx：for = “”，“”中寫當(dāng)前小程序js頁面中data的對象名。
實際效果圖（并非上述代碼實現(xiàn)）
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要介紹了 微信小程序 獲取二維碼實例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要為大家介紹了js類型判斷內(nèi)部實現(xiàn)原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要為大家介紹了前端對接WebSocket與心跳重連實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
TypeScript新語法之infer?extends示例詳解
這篇文章主要為大家介紹了TypeScript新語法之infer?extends示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序 選擇器（時間，日期，地區(qū)）實例詳解的相關(guān)資料,這里提供了實例代碼及實現(xiàn)效果圖，幫助大家學(xué)習(xí)理解這部分知識，需要的朋友可以參考下2016-11-11
Proxy的不可變數(shù)據(jù)優(yōu)點及使用詳解
這篇文章主要為大家介紹了Proxy的不可變數(shù)據(jù)優(yōu)點及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要給大家介紹的是JavaScript中的單例模式，設(shè)計模式代表了最佳的實踐，通常被有經(jīng)驗的面向?qū)ο蟮能浖_發(fā)人員所采用。設(shè)計模式是軟件開發(fā)人員在軟件開發(fā)過程中面臨的一般問題的解決方案,需要的朋友可以參考一下2021-09-09
微信小程序 ES6Promise.all批量上傳文件實現(xiàn)代碼
這篇文章主要介紹了微信小程序 ES6Promise.all批量上傳文件實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了Javascript 常見的高階函數(shù)的相關(guān)資料，高階函數(shù)，英文叫 Higher Order function。一個函數(shù)可以接收另外一個函數(shù)作為參數(shù)，這種函數(shù)就叫做高階函數(shù),需要的朋友可以參考一下2021-09-09
這篇文章主要介紹了微信小程序 閉包寫法詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-12-12