Directives : v-if, v-for, v-bind et v-on
Effectuez un rendu conditionnel avec v-if et v-show, parcourez des éléments avec v-for, liez dynamiquement des attributs avec v-bind et écoutez les événements du DOM avec v-on.
Directives : v-if, v-for, v-bind et v-on est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Que sont les directives Vue ?
Les directives sont des attributs spéciaux préfixés par v- qui indiquent à Vue d’effectuer une action sur un élément du DOM. Elles sont évaluées comme des expressions JavaScript et réagissent aux changements des données réactives.
v-if, v-else-if, v-else
v-if affiche conditionnellement un élément selon qu’une expression est évaluée comme vraie ou fausse. Lorsque l’expression est fausse, l’élément est complètement supprimé du DOM. v-else fournit la solution de repli.
<div v-if="isLoggedIn">
<UserDashboard />
</div>
<div v-else-if="isLoading">
<Spinner />
</div>
<div v-else>
<LoginForm />
</div>v-show — Basculer la visibilité
v-show bascule la propriété CSS display: none au lieu d’ajouter ou de supprimer l’élément du DOM. Utilisez v-show lorsque la visibilité de l’élément change fréquemment ; utilisez v-if lorsque la condition change rarement.
<!-- Good for frequently toggling: -->
<div v-show="isDropdownOpen">...</div>
<!-- Good for rarely changing: -->
<div v-if="userHasPremium">...</div>v-for — Afficher des listes
v-for="item in items" affiche l’élément pour chaque élément de la liste. Incluez toujours :key pour garantir des mises à jour stables.
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }} — {{ user.email }}
</li>
</ul>
<!-- With index: -->
<li v-for="(item, index) in items" :key="item.id">
{{ index + 1 }}. {{ item.title }}
</li>v-for avec un objet
Parcourez les valeurs d’un objet ou ses paires clé-valeur.
<dl>
<template v-for="(value, key) in user" :key="key">
<dt>{{ key }}</dt>
<dd>{{ value }}</dd>
</template>
</dl>v-bind — Lier des attributs
v-bind:attr ou sa forme abrégée :attr lie dynamiquement un attribut HTML à une valeur réactive.
<img :src="user.avatar" :alt="user.name">
<a :href="getLink(post.id)">{{ post.title }}</a>
<button :disabled="isLoading" :class="{ active: isActive }">Save</button>Syntaxe objet de v-bind
Liez plusieurs attributs à la fois à l’aide d’un objet.
<input v-bind="{
type: 'email',
placeholder: 'Enter email',
disabled: isSubmitting
}">Liaison de classes : :class
Reliez conditionnellement des classes CSS avec un objet (clé = nom de classe, valeur = condition) ou avec un tableau.
<div :class="{ 'is-active': isActive, 'has-error': hasError }">...</div>
<!-- Array syntax: -->
<div :class="[baseClass, isActive ? 'active' : '']">
<!-- Dynamic in script setup: -->
:class="{ card: true, [variantClass]: true }"Liaison de styles : :style
Liez des styles en ligne avec un objet en camelCase.
<div :style="{ backgroundColor: brandColor, padding: spacing + 'px' }">v-on — Écouter les événements
v-on:event ou sa forme abrégée @event ajoute des écouteurs d’événements.
<button @click="handleClick">Click Me</button>
<input @input="value = $event.target.value">
<form @submit.prevent="handleSubmit">...</form>Modificateurs d’événements
Vue fournit des modificateurs d’événements intégrés : .prevent (preventDefault), .stop (stopPropagation), .once (s’exécute une fois), .self (uniquement si la cible est l’élément lui-même) et .passive (améliore les performances du défilement).
<form @submit.prevent="submit">
<button @click.stop="selectItem">
<div @click.self="closeModal">
<div @scroll.passive="onScroll">Vérification rapide
Quand devez-vous utiliser v-show plutôt que v-if ?
Récapitulatif : directives Vue
v-if supprime ou ajoute des éléments au DOM. v-show bascule l’affichage. v-for affiche des listes (utilisez toujours :key). v-bind (:) lie des attributs, :class et :style. v-on (@) ajoute des écouteurs d’événements. Modificateurs d’événements : .prevent, .stop et .once. v-model crée une liaison bidirectionnelle (en combinant v-bind:value et v-on:input).
Questions Fréquemment Posées
La leçon « Directives : v-if, v-for, v-bind et v-on » est-elle gratuite ?
Oui — le texte complet de « Directives : v-if, v-for, v-bind et v-on » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Directives : v-if, v-for, v-bind et v-on » ?
Effectuez un rendu conditionnel avec v-if et v-show, parcourez des éléments avec v-for, liez dynamiquement des attributs avec v-bind et écoutez les événements du DOM avec v-on. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Directives : v-if, v-for, v-bind et v-on » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- SFC Vue : script, template et style
- API Options : data, methods et computed
- Directives : v-if, v-for, v-bind et v-on
- Props et événements des composants