WeChat Mini 프로그램 튜토리얼 목록 렌더링

wx:for

구성 요소에 wx:for 제어 속성을 사용하여 배열을 바인딩하면 배열에 있는 각 항목의 데이터를 사용하여 구성 요소를 반복적으로 렌더링할 수 있습니다.

기본 배열의 현재 항목에 대한 첨자 변수 이름의 기본값은 index이고, 배열의 현재 항목에 대한 변수 이름의 기본값은 item입니다

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

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

wx:for-item을 사용하여 배열의 현재 요소의 변수 이름을 지정합니다.

wx:for-index를 사용하여 배열의 현재 첨자의 변수 이름을 지정합니다.

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

wx:for도 중첩될 수 있습니다. . 아래는 곱셈표입니다

<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

block wx:if와 유사하며 wx:for는 2b5957c2850173214f4ea7f1261e9a0f 태그에도 사용할 수 있습니다. 여러 노드를 포함하는 블록. 예:

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

위는 WeChat 애플릿 튜토리얼의 목록 렌더링 내용입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!