Adloun

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

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →