WeChat ミニ プログラム チュートリアル 条件付きレンダリング

wx:if

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



wx:elif と wx:else を使用して else ブロックを追加することもできます:

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

block wx:if

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

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

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

wx:if と非表示

wx:if のテンプレートにはデータ バインディングも含まれている可能性があるため、wx:if の条件値が切り替わると、MINA にはローカル レンダリング プロセスがあり、条件付きブロックが確実に切り替え時に破棄または再レンダリングされます。

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

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

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

上記は WeChat アプレット チュートリアルの条件付きレンダリングの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。