Vue3 v-show-Direktive
Vue3 Eingebaute Direktivenv-showDie Direktive wird verwendet, um die Sichtbarkeit eines Elements basierend auf dem truthy-/falsy-Wert eines Ausdrucks umzuschalten. Sie steuert das Anzeigen und Ausblenden des Elements über die CSS-Eigenschaft display.
Grundlegende Erklärung
v-showDie Direktive bestimmt, ob ein Element angezeigt wird, basierend auf dem truthy-/falsy-Wert des gebundenen Ausdrucks. Unabhängig davon, ob die Bedingung wahr oder falsch ist, wird das Element in das DOM gerendert, und seine Sichtbarkeit wird über CSS gesteuert.
- Erwarteter Typ: any
- Wirkung: Schaltet die Sichtbarkeit des Elements basierend auf dem truthy-/falsy-Wert des Ausdrucks um, gesteuert über die CSS-Eigenschaft display.
Unterschied zwischen v-show und v-if
| Merkmal | v-show | v-if |
|---|---|---|
| Rendering-Methode | Wird immer in das DOM gerendert, steuert nur das Anzeigen/Ausblenden | Wird gerendert, wenn die Bedingung wahr ist; wird nicht gerendert, wenn sie falsch ist |
| Umschaltleistung | Geringer Umschalt-Overhead (ändert nur CSS) | Hoher Umschalt-Overhead (erfordert das Erstellen/Zerstören von Elementen) |
Verwendungsszenarien
1. Häufiges Umschalten des Anzeigezustands
Wenn ein Element häufig angezeigt/ausgeblendet werden muss, bietet v-show eine bessere Leistung:
Beispiel
<template>
<div>
<button @click="showModal = true">Popup öffnen</button>
<div class="modal" v-show="showModal" @click="showModal = false">
<div class="modal-content" @click.stop>
<p>Dies ist ein Popup</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return { showModal: false }
}
}
</script>
<div>
<button @click="showModal = true">Popup öffnen</button>
<div class="modal" v-show="showModal" @click="showModal = false">
<div class="modal-content" @click.stop>
<p>Dies ist ein Popup</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return { showModal: false }
}
}
</script>
Weitere Erweiterungen