Rendu de la liste du didacticiel du mini programme WeChat

wx:for

Utilisez l'attribut de contrôle wx:for sur le composant pour lier un tableau, et le composant peut être rendu à plusieurs reprises en utilisant les données de chaque élément du tableau.

Le nom de la variable d'indice de l'élément actuel du tableau par défaut est par défaut index, et le nom de la variable de l'élément actuel du tableau est par défaut élément

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

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

Utiliser wx :for-item pour spécifier le tableau Le nom de la variable de l'élément actuel

Utilisez wx:for-index pour spécifier le nom de la variable de l'indice actuel du tableau :

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

wx :for peut également être imbriqué. Vous trouverez ci-dessous une table de multiplication

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

bloc wx:for

Similaire au bloc wx:if, wx:for peut également être utilisé sur le pour restituer une structure contenant plusieurs nœuds. Par exemple :

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

Ce qui précède est le contenu du rendu de liste du didacticiel de l'applet WeChat. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !