Vue3 v-if-Direktive
Vue3 Eingebaute Direktivenv-ifDie Direktive wird für bedingtes Rendern verwendet und entscheidet anhand der Wahrheitswertigkeit des Ausdrucks, ob ein Element oder Template-Fragment gerendert wird.
Grundlegende Beschreibung
v-ifDie Direktive rendert ein Element bedingt basierend auf der Wahrheitswertigkeit des gebundenen Ausdrucks. Wenn die Bedingung wahr ist, wird das Element in das DOM gerendert; wenn sie falsch ist, wird das Element nicht gerendert.
- Erwarteter Typ: any
- Zweck: Bedingtes Rendern; entscheidet anhand der Wahrheitswertigkeit des Ausdrucks, ob das Element gerendert wird. Wenn die Bedingung falsch ist, wird kein DOM gerendert.
Grundlegende Verwendung
Beispiel
<template>
<div>
<p v-if="isLoggedIn">Willkommen zurück, Benutzer</p>
<p v-else>Bitte anmelden</p>
</div>
</template>
<script>
export default {
data() {
return { isLoggedIn: true }
}
}
</script>
<div>
<p v-if="isLoggedIn">Willkommen zurück, Benutzer</p>
<p v-else>Bitte anmelden</p>
</div>
</template>
<script>
export default {
data() {
return { isLoggedIn: true }
}
}
</script>
Kombination mit v-else und v-else-if
v-if kann zusammen mit v-else-if und v-else verwendet werden, um eine bedingte Kette zu bilden:
Beispiel
<div v-if="status === 'loading'">Wird geladen...</div>
<div v-else-if="status === 'error'">Laden fehlgeschlagen</div>
<div v-else>Inhalt: {{ data }}</div>
<div v-else-if="status === 'error'">Laden fehlgeschlagen</div>
<div v-else>Inhalt: {{ data }}</div>
Andere Erweiterungen