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

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

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

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

True

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

组件1组件2组件3

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

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

2.block は wx:if

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

  view1   view2 

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

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

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

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

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

当条件为true时则会隐藏该元素

デモを作成しましょう: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 サイトの他の関連記事を参照してください。