微信小程序 for 循環(huán)詳解
更新時間：2016年10月09日 09:41:57 作者：碼農(nóng)伯伯0丶1
這篇文章主要介紹了微信小程序 for 循環(huán)詳解的相關(guān)資料,需要的朋友可以參考下
1，wx:for
在組件上使用wx:for控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。默認數(shù)組的當(dāng)前項的下標(biāo)變量名默認為index，數(shù)組當(dāng)前項的變量名默認為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>
下面是一個九九乘法表事例：
<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)簽上，以渲染一個包含多節(jié)點的結(jié)構(gòu)塊。例如：
<block wx:for="{{[1,2,3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
效果圖如下：
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
THREE.js添加多個castShadow光源報錯解決及原因分析
這篇文章主要介紹了THREE.js添加多個castShadow的光源報錯解決及原因分析2023-06-06
這篇文章主要介紹了微信小程序之網(wǎng)絡(luò)請求簡單封裝實例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要為大家介紹了WebAssembly增強前端應(yīng)用技巧示例詳解，<BR>有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
JS中的every()對空數(shù)組總返回true原理分析
這篇文章主要為大家介紹了JS中的every()對空數(shù)組總返回true原理分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要為大家介紹了編程式安裝依賴install-pkg源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳值的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳值的方法的相關(guān)資料,希望通過本文能幫助到大家，讓大家實現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了JS ES新特性模板字符串,模板字符串即Template String是增強版的字符串，使用反引號(```)來代替譜通字符串中的用雙引號和單引號,更多相關(guān)介紹,需要的朋友可以參考下面文章的詳細內(nèi)容2021-12-12
這篇文章主要介紹了微信小程序 詳解下拉加載與上拉刷新實現(xiàn)方法的相關(guān)資料,這里介紹了兩種實現(xiàn)方法，需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 圖片絕對定位(背景圖片)的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要為大家介紹了electron?中?webview的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02