Directive v-show dans Vue
Une autre option pour l'affichage conditionnel
est la directive v-show.
Elle s'utilise de manière très similaire :
<template>
<p v-show="isAuth">
+++
</p>
</template>
La différence est que l'élément avec v-show sera toujours
rendu et restera dans le DOM, et seule
sa propriété CSS display sera basculée.
La directive v-if effectue un rendu conditionnel "réel",
car elle garantit que les écouteurs d'événements et les composants enfants
à l'intérieur du bloc sont correctement détruits
et recréés lors des basculements de condition.
La directive v-if est également paresseuse : si la condition
est fausse au moment du rendu initial,
elle ne fera rien - le bloc conditionnel
ne sera pas rendu tant que
la condition ne deviendra pas vraie.
En comparaison, v-show est beaucoup plus simple - l'élément
est toujours rendu, indépendamment de
l'état initial, avec un basculement basé sur le CSS.
En général, v-if a un coût de basculement plus élevé,
tandis que v-show a un coût de rendu initial
plus important. Utilisez donc v-show
si les basculements sont fréquents,
et préférez v-if si la condition
risque de ne pas changer pendant l'exécution.
La directive v-show ne peut pas être utilisée sur un élément
template et ne fonctionne pas avec v-else.
Un paragraphe et un bouton sont donnés. Faites en sorte que le paragraphe soit basculé (toggle) par un clic sur le bouton.
Expliquez les différences entre les directives
v-show et v-if.
Expliquez quand il est préférable d'utiliser
la directive v-show, et quand - v-if.
Expliquez quelles limitations
a la directive v-show.
