微信小程序 for 循環(huán)詳解
更新時(shí)間：2016年10月09日 09:41:57 作者：碼農(nóng)伯伯0丶1
這篇文章主要介紹了微信小程序 for 循環(huán)詳解的相關(guān)資料,需要的朋友可以參考下
1，wx:for
在組件上使用wx:for控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item 事例如下：
wxml文件:
<view wx:for="{{items}}">
{{index}}: {{item:one}}
</view>
js文件：
Page({
items:[{
one: "test1",
},{
one: "test2"
}]
})
可以使用wx:for-item指定數(shù)組當(dāng)前元素的變量名
可以使用wx:for-index指定數(shù)組當(dāng)前下標(biāo)的變量名，事例如下：
wxml文件：
<view wx:for="{{items}}" wx:for-item="name" wx:for-index="id">
{{id}}: {{name.one}}
</view>
下面是一個(gè)九九乘法表事例：
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
<view
wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
<view
wx:if="{{i <= j}}">
{{i}}*{{j}} = {{i * j}}
</view>
</view>
</view>
2，block wx:for
wx:for用在<blcok/>標(biāo)簽上，以渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。例如：
<block wx:for="{{[1,2,3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
效果圖如下：
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
這篇文章主要給大家介紹的是JS中輕松遍歷對(duì)象屬性的幾種方式，文章從自身可枚舉屬性、Object.values() 返回屬性值、Object.entries()來(lái)展開介紹，感興趣的小伙伴可以參考一下2021-09-09
這篇文章主要介紹了微信小程序 首頁(yè)制作簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了javascript條件式訪問屬性和箭頭函數(shù)，下面文章圍繞條件式訪問屬性和箭頭函數(shù)的相關(guān)資料展開文章內(nèi)容,需要的朋友可以參考一下2021-11-11
await 錯(cuò)誤捕獲實(shí)現(xiàn)方式源碼解析
這篇文章主要為大家介紹了await 錯(cuò)誤捕獲實(shí)現(xiàn)方式源碼示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
reduce探索lodash.reduce實(shí)現(xiàn)原理解析
這篇文章主要為大家介紹了reduce探索lodash.reduce實(shí)現(xiàn)原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
微信小程序（應(yīng)用號(hào)）開發(fā)新聞客戶端實(shí)例
這篇文章主要介紹了微信小程序（應(yīng)用號(hào)）開發(fā)新聞客戶端實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹JS數(shù)組去重，關(guān)于去重實(shí)際應(yīng)用中，最常用的方法就是使用Set，也可以使用第三方庫(kù)lodash來(lái)處理，下面一起來(lái)看看文章是怎么介紹JS數(shù)組去重的2021-11-11
tree?shaking對(duì)打包體積優(yōu)化及作用
這篇文章主要為大家介紹了tree?shaking對(duì)打包體積優(yōu)化及作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序中form 表單提交和取值實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了微信小程序 用戶數(shù)據(jù)解密詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2017-01-01