Detaillierte Erläuterung des bedingten Renderings in der Miniprogrammentwicklung

wx:if

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

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

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 Steuerelement--Attribut ist, muss es einem Tag 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

Weil die Vorlage in wx:if auch Datenbindung enthalten kann, also wenn wx:if Wenn die Bedingung Bei Wertwechseln verfügt das Framework über einen lokalen Rendering-Prozess, da dieser sicherstellt, dass der Bedingungsblock beim Umschalten zerstört oder neu gerendert wird.

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

Ausgeblendet ist dagegen 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 hat höhere anfängliche Rendering-Kosten. Wenn häufiges Umschalten erforderlich ist, ist es daher besser, „hidden“ zu verwenden. Wenn es unwahrscheinlich ist, dass sich die Bedingungen während der Laufzeit ändern, ist „wx:if“ besser.

[Verwandte Empfehlungen]

1. Laden Sie den vollständigen Quellcode des WeChat-Miniprogramms herunter

Demo des WeChat-Miniprogramms Bildtransformation

Demo des WeChat-Miniprogramms zur Auswahl verschiedener Farbblöcke

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des bedingten Renderings in der Miniprogrammentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!