Vue : construire une application web (école d'ingénieur) · Chapitre 4 · Application directe du cours
Le modificateur .number
Formulaires · niveau 2
Énoncé
Un champ de texte porte v-model.number="quantite". Quelle valeur, et de quel type, prend quantite quand on tape « 12 », « 3.5 », « 12abc », « abc », rien, « 7 » et « 1e3 » ? Pourquoi un champ type="number" limite-t-il ces surprises ?
Corrigé
La saisie, puis le texte affiché (valeur au format JSON et type) :
"12" → 12 (number)
"3.5" → 3.5 (number)
"12abc" → 12 (number)
"abc" → "abc" (string)
"" → "" (string)
" 7 " → 7 (number)
"1e3" → 1000 (number)parseFloat ignore les espaces au début et ce qui suit le nombre (« 12abc » donne 12), comprend la notation scientifique et renvoie NaN s'il n'y a pas de nombre au début ; Vue garde alors la chaîne : « abc », ou la chaîne vide. Le code doit donc s'attendre à une chaîne, et valider avec Number.isInteger comme le fait le formulaire de commande. Un champ type="number" refuse déjà les lettres et fournit un clavier numérique sur téléphone.
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.