ミニ プログラムの条件付きレンダリングを 10 分で完了する

この記事では、WeChat ミニ プログラム に関する関連知識を提供します。主に条件付きレンダリングに関する関連コンテンツを紹介します。いわゆる条件付きレンダリングとは、表示ページにコードをレンダリングするかどうかを決定することです。見てみましょう。皆さんのお役に立てれば幸いです。

1.wx:if 条件付きレンダリングを実装する

フレームワークでは、wx:if="" を使用します。 コード ブロックをレンダリングする必要があるかどうかを判断するには:

<view>True<view></view></view>

condition の値が true の場合、ビュー コンポーネントはページ上にレンダリングされます。それ以外の場合、コンポーネントはレンダリングされません。表示される。同時に、wx:elif や wx:else と組み合わせて使用​​することもでき、このとき、複数の条件を使用してコードをレンダリングするかどうかを決定できます。

<view>组件1</view><view>组件2</view><view>组件3</view>

デモを行ってみましょう: js ファイルのデータで型を定義し、wxml## で 3 つの型を定義します。 # file ビュー コンポーネントは、type の値に基づいてビュー コンポーネントをレンダリングするかどうかを決定します。

この時点で、type の値を変更すると、ページ レンダリングのコンテンツが変更される可能性があります。

2.block は wx:if

と組み合わせて使用​​されます。wx:if は制御属性であり、ラベルの に追加されます。複数のコンポーネント タグを一度に決定したい場合は、<block></block> タグを使用して複数のコンポーネントをラップし、上記の wx:if コントロール属性を使用します。

<block>
  <view> view1 </view>
  <view> view2 </view></block>

注: はコンポーネントではありません。単なるラッピング コンテナであり、ページ上でのレンダリングは行われません。

デモをしてみましょう: 2 つの view コンポーネントを <block></block> でラップし、wx: if# を使用します。 ## は、これら 2 つのコンポーネントをレンダリングする必要があるかどうかを決定します。

この時点では、ページ上に 2 つの
view コンポーネントが描画され、ラッピング コンテナである block は描画されません。

3.hiden は条件付きレンダリングを実装します

フレームワークでは、

hidden="" を使用してコンポーネントの表示と非表示を制御します。前のものとは異なり、非表示のコンポーネントは常にレンダリングされ、表示と非表示を切り替える単純なコントロールにすぎません。

<view>当条件为true时则会隐藏该元素</view>

デモを作成しましょう: js ファイルでフラグを定義し、wxml ファイルで hidden を使用します。 ビューコンポーネントを非表示にします。


AppData のフラグ値を変更して、ビュー コンポーネントを非表示にするかどうかを制御できます。

4. wx:if と非表示

wx:if のテンプレートにはデータ バインディングも含まれる可能性があるため、 wx:if の条件値が切り替わる場合、フレームワークには部分的なレンダリング プロセスがあります。これは、切り替え時に条件付きブロックが確実に破棄または再レンダリングされるためです。

同時に

wx:if も遅延しており、最初のレンダリング条件が false の場合、フレームワークは何もせず、条件が初めて true になったときに部分レンダリングを開始します。

対照的に、

hidden は非常に単純で、コンポーネントは常にレンダリングされ、表示と非表示を単純に制御するだけです。

一般的に、

wx:if はスイッチング コストが高く、hidden は初期レンダリング コストが高くなります。したがって、頻繁に切り替える必要がある場合は hidden を使用し、実行時に条件が変化する可能性が低い場合は wx:if を使用するのが適しています。

[関連する学習の推奨事項:

小プログラム学習チュートリアル]

以上がミニ プログラムの条件付きレンダリングを 10 分で完了するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。