ミニプログラム開発における条件付きレンダリングについて詳しく解説

wx:if

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

<view wx:if="{{condition}}"> True </view>

wx:elifとwx:elseを使用することもできますelse ブロックを 1 つ追加するには:

<view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view>

block wx:if

wx:if はコントロール 属性 であるため、ラベルに追加する必要があります。ただし、複数のコンポーネント タグを一度に判断したい場合は、2b5957c2850173214f4ea7f1261e9a0f タグを使用して複数のコンポーネントをラップし、それに wx:if コントロール属性を使用できます。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view></block>

注: 2b5957c2850173214f4ea7f1261e9a0f はコンポーネントではなく、ページ上でレンダリングを行わず、コントロール属性のみを受け入れる単なるラッピング要素です。

wx:if vs hidden

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

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

対照的に、hidden ははるかに単純で、コンポーネントは常にレンダリングされ、表示と非表示を切り替えるだけの単純なコントロールです。

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

【関連推奨事項】

1. WeChat ミニ プログラムの完全なソース コードのダウンロード

2. WeChat ミニ プログラムのデモ: カルーセル画像の変換

3. WeChat ミニ プログラムのゲーム デモは、さまざまなカラー ブロックを選択します

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