Vue.js bedingtes Rendering und V-if vs. V-show

Wenn Ihnen meine Artikel gefallen, können Sie mir einen Kaffee spendieren :)
Kauf mir Kaffee

Bedingtes Rendering von Vue.js

v-if und v-show-Anweisungen werden verwendet, um einen Block in Vue.js bedingt zu rendern.

v-wenn

In vue.js wird die Direktive v-if verwendet, um einen Block bedingt zu rendern. Der Block wird nur gerendert, wenn der Ausdruck der Direktive einen wahrheitsgemäßen Wert zurückgibt.

Beispiel :

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<template>
  <button @click="show = !show">toggle</button>
    <h1 v-if="show">Vue.js</h1>
</template>

Sie können die Anweisung v-else verwenden, um einen „else-Block“ für v-if anzugeben. Wenn der v-if-Direktive-Ausdruck nicht „true“ zurückgibt, wird der v-else-Block gerendert.

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<template>
  <button @click="show = !show">toggle</button>
    <h1 v-if="awesome"> v-if directive </h1>
    <h1 v-else> v-else directive </h1>
</template>

v-sonst-wenn

Das v-else-if dient als "else if-Block" für v-if. Es kann auch mehrfach verkettet werden. Wenn v-if und v-else-if nicht als wahr ausgewertet werden, wird die v-else-Direktive ausgelöst.

 <p v-if="currentState === 0">State 0: Message 1</p>
    <p v-else-if="currentState === 1">State 1: Message 2</p>
    <p v-else-if="currentState === 2">State 2: Message 3</p>
    <p v-else>State 3: Message 4</p>

V-Show

Wenn wir ein Element bedingt anzeigen möchten, können wir die Direktive v-show als weitere Option verwenden.

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

Der Unterschied besteht darin, dass ein Element mit einer V-Show immer gerendert wird und im DOM verbleibt. v-show ändert die CSS-Anzeigeeigenschaft, um das Element anzuzeigen oder auszublenden. v-show funktioniert nicht mit v-else

v-if vs. v-show

v-if ist „echtes“ bedingtes Rendering, da es sicherstellt, dass Ereignis-Listener und untergeordnete Komponenten innerhalb des bedingten Blocks beim Umschalten ordnungsgemäß zerstört und neu erstellt werden.

v-if: Wenn die Bedingung beim ersten Rendern falsch ist, wird nichts unternommen – der bedingte Block wird nicht gerendert, bis die Bedingung zum ersten Mal wahr wird.

v-show wird immer gerendert und verbleibt im DOM. v-show ändert die CSS-Anzeigeeigenschaft, um das Element anzuzeigen oder auszublenden. v-show funktioniert nicht mit v-else

v-if hat höhere Umschaltkosten, während v-show höhere anfängliche Renderkosten hat. Bevorzugen Sie v-show, wenn Sie etwas sehr oft umschalten müssen, und bevorzugen Sie v-if, wenn es unwahrscheinlich ist, dass sich der Zustand zur Laufzeit ändert.

Abschluss

In diesem Artikel haben wir die Merkmale und Unterschiede der Anweisungen v-if und v-show untersucht. Das Verständnis dieser Unterschiede ist wichtig für die Optimierung der Rendering-Leistung und die Verwaltung der Elementsichtbarkeit in Ihren Vue.js-Anwendungen.

Das obige ist der detaillierte Inhalt vonVue.js bedingtes Rendering und V-if vs. V-show. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!