ホームページ > 記事 > WeChat アプレット > WeChat ミニ プログラム チュートリアル リストのレンダリング
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>
ブロック wx:for
ブロック wx:if と同様に、wx:for も 2b5957c2850173214f4ea7f1261e9a0f タグで使用して、複数のノードを含む構造ブロックをレンダリングできます。例:
<block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view> <view> {{item}} </view> </block>
上記は、WeChat アプレット チュートリアルのリスト レンダリングの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。