Vue : construire une application web (école d'ingénieur) · Chapitre 1 · Application directe du cours
Prédire l'affichage
Premiers pas avec Vue · niveau 1 (application)
Énoncé
Avec les données suivantes, qu'affiche chaque élément de la liste ?
const { createApp } = Vue;
createApp({
setup() {
return { titre: "Introduction à l’algorithmique", prix: 89, quantite: 3, promo: undefined };
},
}).mount("#app");
<ol id="app">
<li>{{ quantite * prix }}</li>
<li>{{ "Total : " + quantite * prix }}</li>
<li>{{ titre.length > 10 ? titre.slice(0, 10) + "…" : titre }}</li>
<li>{{ [quantite, prix].join(" × ") }}</li>
<li>{{ promo }}</li>
<li>{{ promo ?? "aucune promotion" }}</li>
<li>{{ quantite === "3" }}</li>
</ol>Corrigé
Le texte de chaque élément de la liste, entre guillemets :
"267"
"Total : 267"
"Introducti…"
"3 × 89"
""
"aucune promotion"
"false"
Le titre compte 30 caractères, il est coupé après 10. La 5e ligne est vide : undefined s'affiche comme une chaîne vide, et c'est l'opérateur ?? de la ligne suivante qui fournit un texte par défaut. La dernière est false : === compare aussi les types, et le nombre 3 n'est pas la chaîne « 3 ».
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.