ホームページ > WeChat アプレット > ミニプログラム開発 > wx:for および wx:for-item 小規模プログラムの開発

wx:for および wx:for-item 小規模プログラムの開発

php中世界最好的语言
リリース: 2018-06-12 10:12:56
オリジナル
2150 人が閲覧しました

今回は、wx:for と wx:for-item の小さなプログラムを開発する際の注意事項をいくつか紹介します。以下は実際のケースです。

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

1次元配列の場合は、次のようにループアウトされます:

<view wx:for="{{list}}">
{{index}} {{item.name}}
</view>
ログイン後にコピー
ログイン後にコピー

上記のコードでは、 item は list のエイリアスです。

それが 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" を使用してループ処理を定義します 各要素の変数が一次元配列の場合、以下のようにループします:

<view wx:for="{{list}}">
{{index}} {{item.name}}
</view>
ログイン後にコピー
ログイン後にコピー

上記のコードでは、 item は list のエイリアスです。

それが 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 は注意して使用してください。 in sub-loops

<view wx:for="{{parentList}}">
 {{item.id}}
 <view wx:for-item="{{item.childList}}" wx:for-item="items">
 {{items.name}}{{items.account}}
 </view>
ログイン後にコピー
ログイン後にコピー

この記事のケースを読んだことがあるはずです。あなたはこの方法をマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSへのgetter+setter追加のまとめ


実際のプロジェクトでのwebpack+react+antdスキャフォールディングの使い方

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート