Vue3 Bedingte Anweisungen

In Vue 3 können Sie mehrere bedingte Anweisungen in Templates verwenden, um das Rendering von Komponenten zu steuern.

Die wichtigsten bedingten Anweisungen sind:v-if、v-else-if、v-elseundv-show, im Folgenden werden ihre Verwendung und Unterschiede aufgeführt:

  • v-if: das Element, wenn die Bedingung erfüllt istfalsewird nicht ins DOM gerendert, geeignet für Situationen, in denen sich Bedingungen selten ändern.
  • v-show: Das Element wird immer ins DOM gerendert, geeignet für Situationen, in denen sich Bedingungen häufig ändern, mit besserer Leistung beim Umschalten der Sichtbarkeit.
  • v-else-ifundv-else: wird verwendet, um mehrere bedingte Verzweigungen zu handhaben, kombiniert mitv-ifverwenden.

Bedingte Prüfung

v-if

Rendert Elemente bedingt auf Grundlage der Wahrheitswertigkeit eines Ausdrucks. Wenn der Ausdruck true ergibt, wird das Element gerendert; wenn false, wird es nicht gerendert (das Element wird nicht im DOM erstellt).

Die bedingte Prüfung verwendet die v-if-Direktive. Das Element wird nur angezeigt, wenn der Ausdruck der Direktive true zurückgibt:

v-if-Direktive

Verwenden Sie die v-if-Direktive bei einem Element:

<div id="app"> <p v-if="seen">Jetzt siehst du mich</p> </div> <script>const app = { data() { return { seen: true /* Change tofalse，InformationJustNone法显show */ } } } Vue.createApp(app).mount('#app')</script>

Ausprobieren »

Hier entscheidet die v-if-Direktive anhand des Werts (true oder false) des Ausdrucks seen, ob das p-Element eingefügt wird.

Da v-if eine Direktive ist, muss sie einem einzelnen Element hinzugefügt werden. Wenn mehrere Elemente vorhanden sind, können Sie sie in ein <template>-Element einpacken und v-if darauf verwenden. Das endgültig gerenderte Ergebnis enthält das <template>-Element nicht.

v-if-Direktive

Verwenden Sie die v-if-Direktive bei einem <template>-Element:

<div id="app"> <template v-if="seen"> <h1>Website</h1> <p>Google</p> <p>Beispiel</p> <p>Taobao</p> </template> </div> <script>const app = { data() { return { seen: true /* Change tofalse，InformationJustNone法显show */ } } } Vue.createApp(app).mount('#app')</script>

Ausprobieren »

v-else

Zusammen mit v-if verwendet, rendert es das Element, wenn der vorhergehende v-if-Ausdruck false ist.

Mit der v-else-Direktive können Sie einen "else"-Block zu v-if hinzufügen:

v-else-Direktive

Erzeuge eine Zufallszahl, stelle fest, ob sie größer als 0.5 ist, und gib dann die entsprechende Information aus:

<div id="app"> <div v-if="Math.random() > 0.5">Zufallszahl ist größer als 0.5</div> <div v-else>Zufallszahl ist kleiner oder gleich 0.5</div> </div> <script> Vue.createApp().mount('#app') </script>

Ausprobieren »

v-else-if

Um zusätzliche bedingte Prüfungen zwischen v-if und v-else hinzuzufügen, können Sie mehrere v-else-if-Direktiven nacheinander verwenden.

v-else-Direktive

Prüfen Sie den Wert der Variablen type:

<div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Nicht A/B/C </div> </div> <script> const app = { data() { return { type: "C" } } } Vue.createApp(app).mount('#app') </script>

Ausprobieren »

v-else und v-else-if müssen auf v-if oder v-else-if folgen.

v-show

Zeigt ein Element abhängig von der Wahrheitswertigkeit eines Ausdrucks bedingt an oder blendet es aus. Im Gegensatz zu v-if behält v-show das Element immer im DOM und steuert die Sichtbarkeit des Elements nur über die CSS-Eigenschaft display.

Wir können auch die v-show-Direktive verwenden, um Elemente basierend auf Bedingungen anzuzeigen:

v-show-Direktive

<h1 v-show="ok">Hallo!</h1>

Ausprobieren »

Wenn Sie die Sichtbarkeit eines Elements häufig umschalten müssen, wird v-show empfohlen, da es einfach CSS-Stile umschaltet, anstatt das gesamte Element neu zu rendern.

Andere Erweiterungen