Detaillierte Erläuterung des bedingten Renderings von Vue.j
Dieser Artikel teilt Ihnen hauptsächlich die detaillierte Erklärung des bedingten Renderings von Vue.js. In String-Vorlagen, wie z. B. Handlers, müssen wir einen bedingten Block wie diesen schreiben:
<!-- Handlebars 模板 -->{{#if ok}}
<h1>Yes</h1>{{/if}}In Vue verwenden wir die v-if-Direktive, um die gleiche Funktion zu erreichen:
<h1 v-if="ok">Yes</h1>
Sie können auch v-else verwenden, um einen „else-Block“ hinzuzufügen:
<h1 v-if="ok">Yes</h1>No
# Verwenden Sie <template> bedingte Rendering-Gruppierung für v-if-Elemente.
Da v-if eine Direktive ist, muss sie einem Element hinzugefügt werden. Was aber, wenn Sie mehrere Elemente austauschen möchten? Zu diesem Zeitpunkt können Sie ein <template>-Element als unsichtbares Umhüllungselement behandeln und v-if darauf verwenden. Das endgültige Rendering-Ergebnis wird ohne <template>-Elemente sein.
<p id="example">
<template v-if='ok'>
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template></p>var vm = new Vue({
el: '#example', data: {
ok: true
}
})# v-else und v-else-if
können durch die v-else-Direktive dargestellt werden, um den „else-Block“ von < darzustellen 🎜>: < Das 🎜>v-if
<p v-if="Math.random() > 0.5">
Now you see me</p>
<p v-else>
Now you don't
</p><p v-if="type === 'A'">
A
</p>
<p v-else-if="type === 'B'">
B
</p>
<p v-else-if="type === 'C'">
C
</p>
<p v-else>
Not A/B/C
</p>-Element muss unmittelbar auf das Element mit oder v-else folgen, sonst wird es nicht erkannt. v-ifv-else-if Ähnlich wie
einem Element mit v-else oder v-else-if folgen. v-ifv-else-ifv-show
Eine weitere Option zum Anzeigen von Elementen basierend auf Bedingungen ist die
-Direktive. Der Unterschied zuv-show
<h1 v-show="ok">Hello!</h1>immer gerendert werden und im DOM verbleiben.
Schalten Sie einfach die CSS-Eigenschaftsanzeige des Elements um. v-showv-show
weder das Element noch v-show unterstützt. <template>v-elsev-if vs v-show
v-if
v-if Im Gegensatz dazu ist
v-show Im Allgemeinen hat
einen höheren anfänglichen Rendering-Overhead hat. Daher ist es besser, v-if zu verwenden, wenn Sie sehr häufig wechseln müssen; wenn sich die Bedingungen zur Laufzeit selten ändern, ist es besser, v-show zu verwenden. v-showv-ifv-if
In String-Vorlagen wie „Lenkers“ müssen wir einen bedingten Block wie diesen schreiben:
In Vue verwenden wir<!-- Handlebars 模板 -->{{#if ok}}
<h1>Yes</h1>{{/if}} Die Direktive erreicht die gleiche Funktion: v-if
<h1 v-if="ok">Yes</h1>verwenden, um einen „else-Block“ hinzuzufügen:
v-else
<h1 v-if="ok">Yes</h1># Verwenden Sie < auf demNo
Element 🎜> Bedingte Rendering-Gruppierung <template>v-ifDa eine Direktive ist, muss sie einem Element hinzugefügt werden. Was aber, wenn Sie mehrere Elemente austauschen möchten? Zu diesem Zeitpunkt können Sie ein
als unsichtbares Umhüllungselement v-if behandeln und <template> darauf verwenden. Das endgültige Rendering-Ergebnis ist ohne v-if-Elemente. <template>
<p id="example">
<template v-if='ok'>
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template></p># var vm = new Vue({
el: '#example', data: {
ok: true
}
}) und v-elsev-else-if können durch die -Direktive dargestellt werden, um den „else-Block“ von < darzustellen 🎜>: < Das 🎜>
v-elsev-if-Element muss unmittelbar auf das Element mit
<p v-if="Math.random() > 0.5">
Now you see me</p>
<p v-else>
Now you don't
</p> folgen, sonst wird es nicht erkannt. <p v-if="type === 'A'">
A
</p>
<p v-else-if="type === 'B'">
B
</p>
<p v-else-if="type === 'C'">
C
</p>
<p v-else>
Not A/B/C
</p> Ähnlich wie v-else muss auch v-if einem Element mit v-else-if oder
v-elsev-showv-else-ifv-ifEine weitere Option zum Anzeigen von Elementen basierend auf Bedingungen ist die v-else-if-Direktive.
immer gerendert werden und im DOM verbleiben. v-show Schalten Sie einfach die CSS-Eigenschaftsanzeige des Elements um.
<h1 v-show="ok">Hello!</h1>
Beachten Sie, dass v-show weder das Element v-show noch
v-showv-if vs v-show<template>v-else ist „echtes“ bedingtes Rendering, da es sicherstellt, dass Ereignis-Listener und Unterkomponenten innerhalb des bedingten Blocks während des Wechsels ordnungsgemäß zerstört und neu erstellt werden.
v-if Im Gegensatz dazu ist
Im Allgemeinen hat v-if einen höheren Switching-Overhead, während v-show einen höheren anfänglichen Rendering-Overhead hat. Daher ist es besser, v-show zu verwenden, wenn Sie sehr häufig wechseln müssen. Wenn sich die Bedingungen zur Laufzeit selten ändern, ist es besser, v-if zu verwenden.
Verwandte Empfehlungen:
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des bedingten Renderings von Vue.j. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11
Mar 08, 2024 pm 03:06 PM
Das Windows-Betriebssystem ist eines der beliebtesten Betriebssysteme der Welt und seine neue Version Win11 hat viel Aufmerksamkeit erregt. Im Win11-System ist die Erlangung von Administratorrechten ein wichtiger Vorgang. Mit Administratorrechten können Benutzer weitere Vorgänge und Einstellungen auf dem System durchführen. In diesem Artikel wird ausführlich beschrieben, wie Sie Administratorrechte im Win11-System erhalten und wie Sie Berechtigungen effektiv verwalten. Im Win11-System werden Administratorrechte in zwei Typen unterteilt: lokaler Administrator und Domänenadministrator. Ein lokaler Administrator verfügt über vollständige Administratorrechte für den lokalen Computer
Detaillierte Erläuterung der Divisionsoperation in Oracle SQL
Mar 10, 2024 am 09:51 AM
Detaillierte Erläuterung der Divisionsoperation in OracleSQL In OracleSQL ist die Divisionsoperation eine häufige und wichtige mathematische Operation, die zur Berechnung des Ergebnisses der Division zweier Zahlen verwendet wird. Division wird häufig in Datenbankabfragen verwendet. Daher ist das Verständnis der Divisionsoperation und ihrer Verwendung in OracleSQL eine der wesentlichen Fähigkeiten für Datenbankentwickler. In diesem Artikel werden die relevanten Kenntnisse über Divisionsoperationen in OracleSQL ausführlich erörtert und spezifische Codebeispiele als Referenz für die Leser bereitgestellt. 1. Divisionsoperation in OracleSQL
Detaillierte Erläuterung der Rolle und Verwendung des PHP-Modulo-Operators
Mar 19, 2024 pm 04:33 PM
Der Modulo-Operator (%) in PHP wird verwendet, um den Rest der Division zweier Zahlen zu ermitteln. In diesem Artikel werden wir die Rolle und Verwendung des Modulo-Operators im Detail besprechen und spezifische Codebeispiele bereitstellen, um den Lesern ein besseres Verständnis zu erleichtern. 1. Die Rolle des Modulo-Operators Wenn wir in der Mathematik eine ganze Zahl durch eine andere ganze Zahl dividieren, erhalten wir einen Quotienten und einen Rest. Wenn wir beispielsweise 10 durch 3 dividieren, ist der Quotient 3 und der Rest ist 1. Um diesen Rest zu ermitteln, wird der Modulo-Operator verwendet. 2. Verwendung des Modulo-Operators In PHP verwenden Sie das %-Symbol, um den Modul darzustellen
Vue.js vs. React: projektspezifische Überlegungen
Apr 09, 2025 am 12:01 AM
Vue.js eignet sich für kleine und mittelgroße Projekte und schnelle Iterationen, während React für große und komplexe Anwendungen geeignet ist. 1) Vue.js ist einfach zu bedienen und für Situationen geeignet, in denen das Team nicht ausreicht oder die Projektskala klein ist. 2) React hat ein reichhaltigeres Ökosystem und eignet sich für Projekte mit hoher Leistung und komplexen funktionalen Bedürfnissen.
Detaillierte Erläuterung der Funktion system() des Linux-Systemaufrufs
Feb 22, 2024 pm 08:21 PM
Detaillierte Erläuterung der Funktion system() des Linux-Systems Der Systemaufruf ist ein sehr wichtiger Teil des Linux-Betriebssystems. Er bietet eine Möglichkeit, mit dem Systemkernel zu interagieren. Unter diesen ist die Funktion system() eine der am häufigsten verwendeten Systemaufruffunktionen. In diesem Artikel wird die Verwendung der Funktion system() ausführlich vorgestellt und entsprechende Codebeispiele bereitgestellt. Grundlegende Konzepte von Systemaufrufen Systemaufrufe sind eine Möglichkeit für Benutzerprogramme, mit dem Betriebssystemkernel zu interagieren. Benutzerprogramme fordern das Betriebssystem an, indem sie Systemaufruffunktionen aufrufen
Ist Vue.js schwer zu lernen?
Apr 04, 2025 am 12:02 AM
Vue.js ist nicht schwer zu lernen, insbesondere für Entwickler mit einer JavaScript -Stiftung. 1) Sein progressives Design und das reaktionsschnelle System vereinfachen den Entwicklungsprozess. 2) Komponentenbasierte Entwicklung macht das Codemanagement effizienter. 3) Die Nutzungsbeispiele zeigen eine grundlegende und fortgeschrittene Verwendung. 4) Häufige Fehler können durch VEDEVTOOLS debuggen werden. 5) Leistungsoptimierung und Best Practices, z. B. die Verwendung von V-IF/V-Shows und Schlüsselattributen, können die Anwendungseffizienz verbessern.
Wird Vue für Frontend oder Backend verwendet?
Apr 03, 2025 am 12:07 AM
Vue.js wird hauptsächlich für die Front-End-Entwicklung verwendet. 1) Es handelt sich um ein leichtes und flexibles JavaScript-Framework, das sich auf den Aufbau von Benutzeroberflächen und einseitigen Anwendungen konzentriert. 2) Der Kern von Vue.js ist das reaktionsschnelle Datensystem, und die Ansicht wird automatisch aktualisiert, wenn sich die Daten ändert. 3) Es unterstützt die Komponentenentwicklung und die Benutzeroberfläche kann in unabhängige und wiederverwendbare Komponenten aufgeteilt werden.
VUE.JS: Definieren seiner Rolle in der Webentwicklung
Apr 18, 2025 am 12:07 AM
Vue.js 'Rolle in der Webentwicklung besteht darin, als progressives JavaScript -Framework zu fungieren, das den Entwicklungsprozess vereinfacht und die Effizienz verbessert. 1) Es ermöglicht Entwicklern, sich auf Geschäftslogik durch reaktionsschnelle Datenbindung und Komponentenentwicklung zu konzentrieren. 2) Das Arbeitsprinzip von Vue.js beruht auf reaktionsschnellen Systemen und virtuellem DOM, um die Leistung zu optimieren. 3) In den tatsächlichen Projekten ist es üblich, Vuex zu verwenden, um den globalen Zustand zu verwalten und die Datenreaktionsfähigkeit zu optimieren.
