CATALOGUE Code & Data Formation JavaScript Apprendre Vue JS 3 Utilisation de la directive v-for dans Vue.js

Utilisation de la directive v-for dans Vue.js

Super Challenge - Partie 2
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Vue JS 3
Revoir le teaser Je m'abonne
Transcription
Cette leçon fait partie de la formation
69,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
Cette leçon fait partie de la formation
69,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Affichage de données JSON et mise en forme

Objectifs

Les objectifs de cette vidéo sont d'apprendre à utiliser la directive v-for pour afficher des données JSON, d'appliquer des styles CSS aux éléments générés dynamiquement, et de conditionner l'affichage avec v-if en fonction des interactions utilisateur.

Résumé

Apprenez à utiliser la directive v-for dans Vue.js afin d'afficher des données JSON dynamiquement, avec des exemples pratiques de mise en forme personnalisée.

Description

Dans cette leçon, nous allons explorer comment utiliser la directive v-for de Vue.js pour afficher des éléments automatiquement à partir de données JSON. Nous commencerons par insérer une balise div qui contiendra les informations des personnes listées dans notre fichier JSON. À l'aide de v-for, nous parcourrons ces données et extrairons des informations telles que le titre, le prénom, le nom de famille, le téléphone et le pays. Nous verrons également comment afficher des images en liant dynamiquement la propriété src de la balise img aux données JSON.

En outre, nous apprendrons à appliquer des styles CSS pour améliorer la présentation, notamment en flottant les images à gauche et en ajoutant des marges. Nous aborderons ensuite l'utilisation de la directive v-if pour conditionner l'affichage des éléments en fonction de l'état de cases à cocher. Cela nous permettra de filtrer l'affichage des informations selon que nous souhaitons voir les hommes, les femmes ou les numéros de téléphone. Enfin, nous mettrons en forme ces éléments pour éviter les erreurs d'alignement et garantir une apparence claire et ordonnée.

Voir plus

Questions fréquentes

Quelle directive permet d'afficher dynamiquement des éléments à partir d'un tableau en Vue.js ?
La directive v-for permet d'afficher dynamiquement des éléments à partir d'un tableau en Vue.js.
Comment lie-t-on une propriété d'image dans Vue.js ?
On lie une propriété d'image dans Vue.js en utilisant la directive v-bind ou son raccourci :, suivi de src.
Pourquoi utiliser la directive <code>v-if</code> dans cette leçon ?
La directive v-if est utilisée pour conditionner l'affichage des éléments en fonction de l'état des cases à cocher, permettant ainsi de filtrer les informations affichées.

Programme détaillé