Une fiche bien formatée — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 1)

Une fiche bien formatée

Premiers pas avec Vue · niveau 2

Énoncé

Afficher la fiche du « Petit Prince » à partir de l'objet suivant :


{ titre: "Le Petit Prince", parution: "1943-04-06", pages: 96, prix: 8.5 }

On affichera le titre, « Paru le 6 avril 1943, 96 pages. » et le prix en euros avec le prix par page. Écrire deux fonctions de mise en forme, euros et date, et les renvoyer avec les données.

Corrigé


<article id="app">
  <h1>{{ livre.titre }}</h1>
  <p>Paru le {{ date(livre.parution) }}, {{ livre.pages }} pages.</p>
  <p>Prix : {{ euros(livre.prix) }}, soit {{ euros(livre.prix / livre.pages) }} la page.</p>
</article>


const { createApp } = Vue;

const livre = {
  titre: "Le Petit Prince",
  parution: "1943-04-06",
  pages: 96,
  prix: 8.5,
};

function euros(montant) {
  return montant.toLocaleString("fr-FR", { style: "currency", currency: "EUR" });
}

function date(iso) {
  return new Date(iso).toLocaleDateString("fr-FR", { dateStyle: "long" });
}

createApp({
  setup() {
    return { livre, euros, date };
  },
}).mount("#app");


Le Petit Prince
Paru le 6 avril 1943, 96 pages.
Prix : 8,50 €, soit 0,09 € la page.

Les fonctions de mise en forme sont des fonctions JavaScript ordinaires, appelées depuis le gabarit. Le prix par page vaut $8, 5/96 \approx 0, 0885$ €, arrondi au centime par toLocaleString.