Vue : construire une application web (école d'ingénieur) · Chapitre 4 · Application directe du cours
v-model développé
Formulaires · niveau 2
Énoncé
Récrire sans v-model une case à cocher reliée à la ref booléenne lettre : quel attribut lier, quel événement écouter, quelle propriété de l'élément lire ?
Corrigé
<div id="app">
<div>
<label><input type="checkbox" :checked="lettre" @change="lettre = $event.target.checked"> Recevoir la lettre</label>
<p>{{ lettre }}</p>
</div>
</div>Au chargement, après avoir coché, puis décoché :
false
true
falsePour une case, v-model lie la propriété checked (et non value), écoute change (et non input) et lit event.target.checked. C'est pour cela que v-model vaut mieux qu'une liaison écrite à la main : il choisit l'attribut et l'événement selon le type de champ.
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.