Home  >  Article  >  WeChat Applet  >  WeChat Mini Program Tutorial List Rendering

WeChat Mini Program Tutorial List Rendering

黄舟
黄舟Original
2017-01-16 15:04:571684browse

wx:for

Use the wx:for control attribute on the component to bind an array, and the component can be repeatedly rendered using the data of each item in the array.

The subscript variable name of the current item of the default array defaults to index, and the variable name of the current item of the array defaults to item

<view wx:for="{{items}}">  
 {{index}}: {{item.message}}  
</view>
Page({  
 items: [{  
 message: &#39;foo&#39;,  
 },{  
 message: &#39;bar&#39;  
 }]  
})

Use wx:for-item to specify the variable name of the current element of the array

Use wx:for-index to specify the variable name of the current subscript of the array:

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

wx:for can also be nested. Below is a multiplication table

<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

Similar to block wx:if, wx:for can also be used on the 2b5957c2850173214f4ea7f1261e9a0f tag to render a structure block containing multiple nodes. For example:

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

The above is the content of the list rendering of the WeChat applet tutorial. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn