Bedingtes Rendering des WeChat Mini-Programm-Tutorials

wx:if

In MINA verwenden wir wx:if="{{condition}}", um zu bestimmen, ob der Codeblock gerendert werden muss:

True

Sie können auch wx:elif und wx:else verwenden, um einen else-Block hinzuzufügen:

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

block wx: if

Da wx:if ein Steuerattribut ist, muss es einer Beschriftung hinzugefügt werden. Wenn wir jedoch mehrere Komponenten-Tags gleichzeitig beurteilen möchten, können wir ein -Tag verwenden, um mehrere Komponenten zu umschließen, und darauf wx:if-Steuerattribute verwenden.

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

Hinweis: ist keine Komponente, sondern nur ein umschließendes Element, das keine Darstellung auf der Seite durchführt und nur Steuerattribute akzeptiert.

wx:if vs versteckt

Da die Vorlage in wx:if auch Datenbindung enthalten kann, führt MINA zu einem teilweisen Rendering-Prozess, wenn der bedingte Wert von wx:if geändert wird stellt sicher, dass der bedingte Block beim Umschalten zerstört oder neu gerendert wird.

Gleichzeitig ist wx:if auch faul. Wenn die anfängliche Rendering-Bedingung falsch ist, unternimmt MINA nichts und beginnt nur mit dem teilweisen Rendering, wenn die Bedingung zum ersten Mal wahr wird.

Im Gegensatz dazu ist versteckt viel einfacher. Die Komponente wird immer gerendert und ist nur ein einfaches Steuerelement zum Ein- und Ausblenden.

Im Allgemeinen hat wx:if höhere Wechselkosten und versteckt höhere anfängliche Rendering-Kosten. Wenn häufiges Umschalten erforderlich ist, ist es daher besser, versteckt zu verwenden. Wenn sich die Bedingungen während der Laufzeit wahrscheinlich nicht ändern, ist wx:if besser.

Das Obige ist der Inhalt des bedingten Renderings des WeChat-Applet-Tutorials. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com).