Collection de films part.2 - Boucle v-for¶
- Faire un fork du pen complété de votre exercice Collection de films. Le Pen était nommé: EXERC - Vue.js - Collection de films Part.1 - Classes CSS dynamiques, faites en un fork et renommez le EXERC - Vue.js - Collection de films Part.2 - Boucle v-for.
- Modifiez votre code afin de faire une boucle sur le tableau de données ci-compte (voir ci-bas). N'oubliez pas de changer le contenu de la balise ainsi que sa classe dynamique pour fonctionner dans la boucle et réfléter le résultat attendu de la Partie 1 de l'exercice.
Aperçu du résultat attendu¶
Devrait être le même résultat que la Partie 1, mais beaucoup moins de ligne dans le HTML.
Données à utiliser¶
moviesArr: [
{
label: "Dune: Part Two",
viewed: true,
year: 2024
},
{
label: "Jocker",
viewed: true,
year: 2019
},
{
label: "The Substance",
viewed: true,
year: 2024
},
{
label: "Don't Look Up",
viewed: false,
year: 2021
},
{
label: "The Power of the Dog",
viewed: false,
year: 2021
},
{
label: "Le plongeur",
viewed: false,
year: 2023
},
{
id: 5,
label: "Simple comme Sylvain",
viewed: false,
year: 2023
},
{
label: "Le successeur",
viewed: false,
year: 2023
},
{
label: "Ligne de fuite",
viewed: false,
year: 2022
},
{
label: "Parasite",
viewed: true,
year: 2019
},
{
label: "Everything, Everywhere All at Once",
viewed: false,
year: 2023
},
{
label: "Menteuse",
viewed: false,
year: 2025
},
{
label: "Menteur",
viewed: false,
year: 2019
},
{
label: "Superman",
viewed: false,
year: 2025
},
{
label: "Perfect Days",
viewed: false,
year: 2024
},
{
label: "Guillermo del Toro's Pinocchio",
viewed: false,
year: 2022
},
{
label: "La déesse des mouches à feu",
viewed: false,
year: 2020
}
]
