Vue.JS Bedingte Rendering
Vue.JS ist eine leicht zu lernende und zugängliche Bibliothek, in der wir mit dem Grundkenntnis der Webentwicklung mit dem Erstellen von Webanwendungen beginnen können. In Vue.JS, Entwickler lieben es, Freiheit zu codieren und zu fühlen, während sie Anwendungen entwickeln.
In jeder dynamischen Webanwendung ist das bedingte Rendering ein notwendiger Teil. Vue.JS bietet verschiedene Möglichkeiten für das bedingte Rendering, und wir können eine der folgenden Möglichkeiten nutzen, die zu unserem Zweck entsprechen:
- V-Show
- v-wenn
- V-ELSE
In diesem Artikel werden wir diese von Vue bereitgestellten Richtlinien ausprobieren.JS für das bedingte Rendering und verstehen sie besser.
V-Show
Die V-Show versteckt das Element nur, indem sie seine Sichtbarkeit deaktiviert. Es verbirgt das Element, wenn der Wert des bestandenen Ausdrucks oder der Variablen nicht wahr ist.
Zum Beispiel:
Dieser Absatz ist nicht versteckt
Dieser Absatz ist versteckt
v-wenn
Andererseits verbergt V-wenn das Element nicht, aber es macht auch nichts, wenn der Wert des bestandenen Ausdrucks oder der Variablen wahr wird.
Zum Beispiel:
Dies ist ein Absatz
Es gibt eine zusätzliche Funktion in der V-IF-Richtlinie im Vergleich zur V-Show-Richtlinie. Wir können es auch auf den Vorlagenblock anwenden, wenn wir nichts zwischen diesem Block rendern wollen. Entweder gibt es eine Kinderkomponente oder viele andere Elemente.
Zum Beispiel:
Dies ist eine Überschrift
Dies ist ein Absatz
V-ELSE
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.
Zum Beispiel:
Dieser Absatz wird rendern, wenn 'Isvar' wahr wird
Andernfalls wird dieser Absatz gerendert.
Wir können auch V-ELSE auf den Vorlagenblock anwenden.
Dies ist eine Überschrift
Dies ist ein Absatz
V-ELSE-IB
Genau wie V-ELSE können wir auch die V-ELSE-IF-Richtlinie zusammen mit der V-IF-Richtlinie verwenden.
Zum Beispiel:
Auto
Buch
Tier
Keiner der Ablove
v-wenn vs. V-Show
Das V-IF und die V-Show machen die gleiche Aufgabe. Beide verbergen beide die Elemente im DOM, basierend auf dem wahren oder falsy -Wert des bestandenen Ausdrucks, aber mit einem subtilen Unterschied des Versteckens und nicht des Renderns Elemente.
Wenn wir die Zeit- und Verarbeitungskosten zwischen diesen beiden vergleichen. Das V-wenn kostet die Laufzeit oder das Umschalten mehr, während V-Show zu Beginn des Renders mehr kostet. Es wäre also ratsam, V-Shows zu verwenden, wenn das Umschalten Zweck ist. Andernfalls wird V-wenn bevorzugt.
Einpacken
In diesem Artikel haben wir gelernt, wie man das DOM in Vue bedingt macht.JS Verwenden von V-IF- und V-ELSE-Richtlinien. Wir haben einige Beispiele gezeigt und über den wirklichen Unterschied zwischen V-Show und V-IF-Richtlinie erfahren. Wenn dieser Artikel Ihnen hilft, ein besseres Verständnis und Konzepte zu haben, besuchen Sie weiterhin LinuxHint.com für so nützliche Inhalte.