Vue : construire une application web (école d'ingénieur) · Chapitre 2 · Application directe du cours
v-if ou v-show
Gabarits et directives · niveau 1 (application)
Énoncé
Dans la page de la section « Afficher sous condition », combien d'éléments <p> contient #app au chargement ? Et après un clic sur « Détails » ? Quel est alors le style du paragraphe qui porte v-show ? Lequel des deux choisir pour un menu que l'on ouvre et ferme souvent ?
Corrigé
Au chargement, #app contient deux paragraphes : celui de la chaîne de conditions et celui qui porte v-show, masqué. Celui qui porte v-if n'existe pas. Après un clic, il y en a trois, et le paragraphe v-show a un attribut style vide. Mesuré au chargement, après un clic et après un second clic :
#avec-if : absent ; #avec-show : présent, style="display: none;"
#avec-if : présent ; #avec-show : présent, style=""
#avec-if : absent ; #avec-show : présent, style="display: none;"Pour un menu ouvert et fermé souvent, v-show : l'élément est créé une seule fois, et basculer display ne coûte presque rien.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.