WeChat Mini-Programm-Tutorial-Listen-Rendering

wx:for

Verwenden Sie das Steuerattribut wx:for für die Komponente, um ein Array zu binden, und die Komponente kann mithilfe der Daten jedes Elements im Array wiederholt gerendert werden.

Der tiefgestellte Variablenname des aktuellen Elements des Standardarrays ist standardmäßig index, und der Variablenname des aktuellen Elements des Arrays ist standardmäßig item

<view wx:for="{{items}}">  
 {{index}}: {{item.message}}  
</view>

Page({  
 items: [{  
 message: 'foo',  
 },{  
 message: 'bar'  
 }]  
})

Verwenden Sie wx :for-item, um das Array anzugeben. Der Variablenname des aktuellen Elements

Verwenden Sie wx:for-index, um den Variablennamen des aktuellen Index des Arrays anzugeben:

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">  
 {{idx}}: {{itemName.message}}  
</view>

wx :for kann auch verschachtelt werden. Unten finden Sie eine Multiplikationstabelle

<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>

Block wx:for

Ähnlich wie Block wx:if kann wx:for auch für den -Tag zum Rendern einer Struktur mit mehreren Knoten. Zum Beispiel:

<block wx:for="{{[1, 2, 3]}}">  
 <view> {{index}}: </view>  
 <view> {{item}} </view>  
</block>

Das Obige ist der Inhalt der Listendarstellung des WeChat-Applet-Tutorials. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!