WeChat ミニ プログラムでの wx:for および wx:for-item の使用法

この記事では主に WeChat アプレット wx:for と wx:for-item の正しい使用法を紹介します。wx:for はループ配列であり、wx:for-item はリストにエイリアスを割り当てるものです。この記事ではいくつかの間違った使用法がリストされています。 、一緒に学びましょう

wx:for="{{list}}"用来循环数组，而list即为数组名wx:for-item="items"は、ループ処理の各要素の変数を定義するために使用されます

1次元配列の場合は、次のようにループします:

<view wx:for="{{list}}">
{{index}} {{item.name}}
</view>

コード、項目はリストのエイリアスです。

それが 2 次元配列または多次元配列の場合は、次のようにループします:

<view wx:for="{{parentList}}">
{{item.id}}
<view wx:for="{{item.childList}}" wx:for-item="items">
{{items.name}}{{item.account}}
</view>
</view>
for (var i = 0 ; i < list.length; i++) {
var xxx = list[i];
}

は

<view wx:for="{{list}}" wx:for-item="xxx"></view>

と同等です: wx:for はループ配列であり、wx: for-item はリストのエイリアスに割り当てられます

以下は誤った使用法です。注意して使用してください:

1. wx:for-item を直接使用すると、リストがループに表示されなくなります

<view wx:for-item="{{list}}">
{{index}} {{item.name}}
</view>

2. サブループでは注意して wx を使用してください: for-item

<view wx:for="{{parentList}}">
 {{item.id}}
 <view wx:for-item="{{item.childList}}" wx:for-item="items">
 {{items.name}}{{items.account}}
 </view>

WeChat アプレット wx:for および wx:for-item

wx:for="{{list}} の正しい使用法" は配列のループに使用され、list は配列名です。 wx :for-item="items" はループ中に各要素の変数を定義するために使用されます。 1 次元配列の場合は、次のようにループアウトされます。

<view wx:for="{{list}}">
{{index}} {{item.name}}
</view>

上記のコードでは、項目はリストのエイリアスです。

それが 2 次元配列または多次元配列の場合は、次のようにループします:

<view wx:for="{{parentList}}">
{{item.id}}
<view wx:for="{{item.childList}}" wx:for-item="items">
{{items.name}}{{item.account}}
</view>
</view>
for (var i = 0 ; i < list.length; i++) {
var xxx = list[i];
}

は

<view wx:for="{{list}}" wx:for-item="xxx"></view>

と同等です: wx:for はループ配列であり、wx: for-item はリストのエイリアスに割り当てられます

以下は誤った使用法です。注意して使用してください:

1. wx:for-item を直接使用すると、リストはループ内に表示されなくなります

<view wx:for-item="{{list}}">
{{index}} {{item.name}}
</view>

2. サブループでは注意して wx を使用してください: for-item

<view wx:for="{{parentList}}">
 {{item.id}}
 <view wx:for-item="{{item.childList}}" wx:for-item="items">
 {{items.name}}{{items.account}}
 </view>

以上がこの記事の全内容です。その他の関連コンテンツについては、こちらをご覧ください。 PHP 中国語 Web サイトにご注意ください。

関連する推奨事項:

WeChat ミニ プログラムを開発するときに AppID を取得する方法

WeChat ミニ プログラムを使用して写真をアップロードする方法

以上がWeChat ミニ プログラムでの wx:for および wx:for-item の使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。