Vue.js ist eine leicht zu erlernende und zugängliche Bibliothek, in der wir mit dem Grundwissen der Webentwicklung Webanwendungen erstellen können. In Vue.js lieben Entwickler das Programmieren und fühlen sich bei der Entwicklung von Anwendungen frei freedom.

In jeder dynamischen Webanwendung ist bedingtes Rendering ein notwendiger Bestandteil. Vue.js bietet verschiedene Möglichkeiten für das bedingte Rendering, und wir können eine der folgenden Methoden verwenden, die für unseren Zweck geeignet sind:

• v-show
• v-wenn
• v-sonst

In diesem Artikel werden wir diese Anweisungen von Vue . ausprobieren.js für bedingtes Rendering und besser verstehen understand.

v-show

Die v-show blendet das Element nur aus, indem es seine Sichtbarkeit deaktiviert. Es blendet das Element aus, wenn der Wert des übergebenen Ausdrucks oder der Variablen nicht wahr ist.

Beispielsweise:

Dieser Absatz ist nicht versteckt

Dieser Absatz ist ausgeblendet

v-wenn

Andererseits blendet v-if das Element nicht aus, rendert aber auch nichts, bis der Wert des übergebenen Ausdrucks oder der Variablen wahr wird.

Beispielsweise:

Es gibt eine zusätzliche Funktion in der v-if-Direktive im Vergleich zur v-show-Direktive. Wir können es auch auf den Vorlagenblock anwenden, wenn wir nichts zwischen diesem Block rendern möchten. Entweder gibt es darin eine untergeordnete Komponente oder viele andere Elemente.

Beispielsweise:

v-sonst

Wir können auch die v-else-Direktive zusammen mit der v-if-Anweisung verwenden, um bedingt zwischen einem der beiden Blöcke zu rendern. Beachten Sie jedoch, dass der v-else-Block direkt nach dem v-if-Block erscheinen muss.

Beispielsweise:

Dieser Absatz wird gerendert, wenn 'isVar' wahr wird

Andernfalls wird dieser Absatz gerendert.

Wir können v-else auch auf den Vorlagenblock anwenden.

v-sonst-wenn

Genau wie v-else können wir auch die v-else-if-Direktive zusammen mit der v-if-Direktive verwenden.

Beispielsweise:

v-wenn vs. v-show

Die v-if und v-show erledigen die gleiche Aufgabe. Beide verbergen die Elemente im DOM basierend auf dem wahrheitsgemäßen oder falschen Wert des übergebenen Ausdrucks, jedoch mit einem subtilen Unterschied zwischen dem Ausblenden und Nicht-Rendering von Elementen.

Wenn wir den Zeit- und Bearbeitungsaufwand zwischen diesen beiden vergleichen. Die v-if kostet während der Laufzeit oder beim Umschalten mehr, während v-show zu Beginn des Renderns mehr kostet. Es wäre also ratsam, v-show zu verwenden, wenn das Umschalten Zweck ist. Andernfalls wird v-if bevorzugt.

Einpacken

In diesem Artikel haben wir gelernt, wie man das DOM in Vue bedingt rendert.js mit v-if- und v-else-Direktiven. Wir haben einige Beispiele gezeigt und den wahren Unterschied zwischen v-show und v-if-Direktive kennengelernt. Wenn dieser Artikel Ihnen hilft, ein besseres Verständnis und Konzepte zu haben, besuchen Sie weiterhin linuxhint.com für solche nützlichen Inhalte.