Directive v-show de Vue3
Vue3 Directives intégréesv-showLa directive est utilisée pour basculer la visibilité d'un élément en fonction de la valeur truthy/falsy d'une expression. Elle contrôle l'affichage et le masquage de l'élément via la propriété CSS display.
Explication de base
v-showLa directive détermine si un élément est affiché en fonction de la valeur truthy/falsy de l'expression liée. Que la condition soit vraie ou fausse, l'élément est rendu dans le DOM, et sa visibilité est contrôlée via CSS.
- Type attendu: any
- Effet: Bascule la visibilité de l'élément en fonction de la valeur truthy/falsy de l'expression, contrôlée par la propriété CSS display.
Différence entre v-show et v-if
| Fonctionnalité | v-show | v-if |
|---|---|---|
| Méthode de rendu | Toujours rendu dans le DOM, contrôle uniquement l'affichage et le masquage | Effectue le rendu lorsque la condition est vraie, n'effectue pas de rendu lorsqu'elle est fausse |
| Performances de basculement | Faible surcoût de basculement (ne modifie que le CSS) | Surcoût de basculement élevé (nécessite la création/la destruction d'éléments) |
Scénarios d'utilisation
1. Basculement fréquent de l'état d'affichage
Lorsqu'un élément doit être affiché/masqué fréquemment, utiliser v-show offre de meilleures performances :
Exemple
<template>
<div>
<button @click="showModal = true">Ouvrir la popup</button>
<div class="modal" v-show="showModal" @click="showModal = false">
<div class="modal-content" @click.stop>
<p>Ceci est une popup</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return { showModal: false }
}
}
</script>
<div>
<button @click="showModal = true">Ouvrir la popup</button>
<div class="modal" v-show="showModal" @click="showModal = false">
<div class="modal-content" @click.stop>
<p>Ceci est une popup</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return { showModal: false }
}
}
</script>
Autres extensions