微信小程序wx:for和wx:for-item的用法詳解
wx:for="{{list}}"用來(lái)循環(huán)數(shù)組，而list即為數(shù)組名wx:for-item="items" 即用來(lái)定義一個(gè)循環(huán)過(guò)程中每個(gè)元素的變量的
如果是一維數(shù)組,按照如下方式循環(huán)出來(lái)：
<view wx:for="{{list}}">
{{index}} {{item.name}}
</view>
以上代碼中，item即為list的別名。
如果是二維甚至多維數(shù)組，按照如下方式循環(huán)：
<view wx:for="{{parentList}}">
{{item.id}}
<view wx:for="{{item.childList}}" wx:for-item="items">
{{items.name}}{{item.account}}
</view>
</view>
for (var i = 0 ; i < list.length; i++) {
var xxx = list[i];
}
等同于
<view wx:for="{{list}}" wx:for-item="xxx"></view>
謹(jǐn)記：wx:for是循環(huán)數(shù)組，wx:for-item即給列表賦別名
以下為幾個(gè)錯(cuò)誤使用，請(qǐng)大家謹(jǐn)慎使用：
1.直接用wx:for-item ，這樣是循環(huán)不出來(lái)列表的
<view wx:for-item="{{list}}">
{{index}} {{item.name}}
</view>
2.子循環(huán)中慎用wx:for-item
<view wx:for="{{parentList}}">
{{item.id}}
<view wx:for-item="{{item.childList}}" wx:for-item="items">
{{items.name}}{{items.account}}
</view>
微信小程序wx:for和wx:for-item的正確用法
wx:for="{{list}}"用來(lái)循環(huán)數(shù)組，而list即為數(shù)組名wx:for-item="items" 即用來(lái)定義一個(gè)循環(huán)過(guò)程中每個(gè)元素的變量的
如果是一維數(shù)組,按照如下方式循環(huán)出來(lái)：
<view wx:for="{{list}}">
{{index}} {{item.name}}
</view>
以上代碼中，item即為list的別名。
如果是二維甚至多維數(shù)組，按照如下方式循環(huán)：
<view wx:for="{{parentList}}">
{{item.id}}
<view wx:for="{{item.childList}}" wx:for-item="items">
{{items.name}}{{item.account}}
</view>
</view>
for (var i = 0 ; i < list.length; i++) {
var xxx = list[i];
}
等同于
<view wx:for="{{list}}" wx:for-item="xxx"></view>
謹(jǐn)記：wx:for是循環(huán)數(shù)組，wx:for-item即給列表賦別名
以下為幾個(gè)錯(cuò)誤使用，請(qǐng)大家謹(jǐn)慎使用：
1.直接用wx:for-item ，這樣是循環(huán)不出來(lái)列表的
<view wx:for-item="{{list}}">
{{index}} {{item.name}}
</view>
2.子循環(huán)中慎用wx:for-item
<view wx:for="{{parentList}}">
{{item.id}}
<view wx:for-item="{{item.childList}}" wx:for-item="items">
{{items.name}}{{items.account}}
</view>
總結(jié)
以上所述是小編給大家介紹的微信小程序wx:for和wx:for-item的用法詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
Javascript:為input設(shè)置readOnly屬性(示例講解)
本篇文章主要是對(duì)Javascript中為input設(shè)置readOnly屬性的示例代碼進(jìn)行了介紹。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
理解Javascript_02_理解undefined和null
其實(shí)在 ECMAScript 的原始類型中，是有Undefined 和 Null 類型的。 這兩種類型都分別對(duì)應(yīng)了屬于自己的唯一專用值，即undefined 和 null。2010-10-10
在ECAMScript3給Function的原型定義了兩個(gè)方法，它們是Function.prototype.call和Function.prototype.apply。本文詳細(xì)介紹了apply與call的用法，有需要的可以參考下。2016-07-07
拖動(dòng)table標(biāo)題實(shí)現(xiàn)改變td的大小(css+js代碼)
拖動(dòng)列寬的表格table標(biāo)題同時(shí)改變td的大小，本文將以實(shí)例演示為大家呈現(xiàn)，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)js或者css有所幫助2013-04-04
詳解基于Vue cli生成的Vue項(xiàng)目的webpack4升級(jí)
這篇文章主要介紹了詳解基于Vue cli生成的Vue項(xiàng)目的webpack4升級(jí)，本文將詳細(xì)介紹從webpack3到webpack4的升級(jí)過(guò)程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
這篇文章主要介紹了js blob類型url的視頻下載問(wèn)題的解決,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
跟我學(xué)習(xí)javascript的Date對(duì)象
跟我學(xué)習(xí)javascript的Date對(duì)象，文章主要介紹了Date 日期和時(shí)間對(duì)象的操作，文章末尾為大家附加了兩個(gè)案例，幫助大家更好的學(xué)習(xí)javascript的Date對(duì)象，對(duì)這方面感興趣的小伙伴們可以參考一下2015-11-11
通過(guò)網(wǎng)頁(yè)查看JS源碼中漢字顯示亂碼的解決方法
這篇文章給大家主要介紹了通過(guò)網(wǎng)頁(yè)查看JS源碼的時(shí)候，發(fā)現(xiàn)漢字顯示是亂碼的解決方法，文中通過(guò)圖文詳解的介紹了解決的步驟，詳細(xì)會(huì)對(duì)大家很有幫助，有需要的朋友們下面來(lái)一起看看吧。2016-10-10
詳細(xì)談?wù)凧avaScript中循環(huán)之間的差異
JS循環(huán)語(yǔ)句也叫迭代語(yǔ)句,是一種特殊的語(yǔ)句,主要用于需要多次執(zhí)行的代碼塊,下面這篇文章主要給大家介紹了關(guān)于JavaScript中循環(huán)之間的差異的相關(guān)資料,需要的朋友可以參考下2021-08-08
創(chuàng)建與框架無(wú)關(guān)的JavaScript插件
這篇文章主要介紹了創(chuàng)建與框架無(wú)關(guān)的JavaScript插件，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12