Vue - Ouest VS Est

Dans les années 90, une rivalité opposa les rappeurs de la côte ouest Américaine 🇺🇸 à ceux de la côte est. Afin d’afficher quel rappeur appartenait à quel camp, vous devrez compléter une app Vue.

Aperçu du résultat 👇

Matériel Pen de départ

Le CSS est déjà réalisé et le cadriciel Vue est déjà installé pour vous dans le pen de départ.

Requis Bouclez sur le tableau de rappeurs, afin de créer un div contenant le nom de chacun d'entre eux 🔁. Si la côte associée à un rappeur ne correspond pas à celle dans la propriété coast de l'app, ce rappeur ne doit pas être visible. Par défaut, les rappeurs de la côte ouest devraient être ceux visibles. Lorsque qu'un bouton correspondant à une côte est cliqué, celui-ci doit changer la valeur de la propriété coast fin de refléter la côte active.

Si cette opération fonctionne, la liste de rappeurs devrait se mettre à jour automatiquement grâce à la magie de Vue ✨ Faites en sorte que les boutons de côtes aillent la classe btn par défaut, ainsi que la classe is-active si la propriété coast leur correspond. Notes de cours 📚

Introduction Vue

Création d'une app VueJS Comment créer en JS la base de l'app Vue

Données {{ }} Les données via les moustache et les attributs des balises via v-bind

Méthodes et événements v-on Les méthodes Vue sont des fonctions qui appartiennent à l'instance Vue sous la propriété "methods".

Conditions v-if Le rendu conditionnel ou autre condition d'affichage

Boucles v-for Boucler sur un tableau d'objets