Vue Academy · Leçon

Conditions et boucles

Effectuez un rendu conditionnel avec v-if et affichez des listes avec v-for

Leçon 2 sur 313 étapes

Conditions et boucles est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 3 leçons au total.

Affichage conditionnel

Vue vous permet d’afficher ou de masquer des parties de l’interface en fonction des données.

v-if affiche un élément sous condition
v-else-if et v-else enchaînent les conditions
v-show active ou désactive la visibilité

v-if

La directive v-if affiche un élément uniquement lorsque son expression est évaluée comme vraie.

<p v-if="isLoggedIn">Welcome back!</p>
<p v-if="cart.length === 0">Your cart is empty.</p>

v-else-if et v-else

Enchaînez les conditions avec v-else-if et v-else. Ces directives doivent suivre directement un v-if.

<p v-if="score >= 90">Grade: A</p>
<p v-else-if="score >= 80">Grade: B</p>
<p v-else-if="score >= 70">Grade: C</p>
<p v-else>Grade: F</p>

v-show

v-show affiche toujours l’élément, mais active ou désactive sa propriété d’affichage CSS.

<div v-show="isVisible">
  This div stays in the DOM,
  only display:none toggles.
</div>

v-if ou v-show

La différence essentielle :

v-if ajoute l’élément au DOM ou l’en supprime complètement
v-show le conserve dans le DOM et active ou désactive simplement son affichage

Utilisez v-show pour les éléments souvent activés ou désactivés. Utilisez v-if lorsque la condition change rarement ou que l’élément est coûteux à créer.

v-for sur des tableaux

La directive v-for affiche une liste en parcourant un tableau.

<ul>
  <li v-for="fruit in fruits">{{ fruit }}</li>
</ul>

<!-- data: fruits = ["Apple", "Banana", "Cherry"] -->

v-for avec un index

v-for peut également vous fournir l’index de chaque élément.

<ul>
  <li v-for="(item, index) in items">
    {{ index }}: {{ item }}
  </li>
</ul>

L’importance de :key

Fournissez toujours une :key unique lors de l’utilisation de v-for.

Cela aide Vue à suivre l’identité de chaque nœud
Cela permet des mises à jour efficaces et correctes du DOM
Utilisez un identifiant unique stable, et non l’index du tableau lorsque les éléments sont réordonnés

<li v-for="user in users" :key="user.id">
  {{ user.name }}
</li>

Pourquoi :key est important

Sans clé appropriée, Vue risque de réutiliser les mauvais éléments lorsque la liste change.

Les champs de saisie pourraient conserver la mauvaise valeur
Les animations pourraient avoir des ratés
L’état pourrait être associé à la mauvaise ligne

Une clé stable et unique évite ces problèmes.

v-for sur des objets

v-for peut parcourir les valeurs des propriétés d’un objet, avec éventuellement la clé et l’index.

<li v-for="(value, key) in userProfile" :key="key">
  {{ key }}: {{ value }}
</li>

<!-- userProfile = { name: "Ada", age: 36 } -->

Combinaison de v-for et des conditions

Pour filtrer une liste, préférez une propriété calculée plutôt que de placer v-if sur le même élément que v-for.

<!-- Filter in a computed, then loop -->
<li v-for="task in activeTasks" :key="task.id">
  {{ task.title }}
</li>

<!-- activeTasks is a computed that
     returns only unfinished tasks -->

Vérification rapide

Vérifiez votre compréhension des conditions et des boucles.

Réponds-y dans la leçon interactive

Récapitulatif : conditions et boucles

Vous avez appris à effectuer des affichages conditionnels et à parcourir des listes :

v-if / v-else-if / v-else effectuent un affichage conditionnel
v-show active ou désactive uniquement l’affichage
v-for parcourt les tableaux et les objets
Ajoutez toujours une :key unique
Filtrez les listes avec des propriétés calculées

Ensuite : liaison des attributs et des classes.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 42
Leçons: 156

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Conditions et boucles » est-elle gratuite ?

Oui — le texte complet de « Conditions et boucles » 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 Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Conditions et boucles » ?

Effectuez un rendu conditionnel avec v-if et affichez des listes avec v-for Tu pratiques Vue 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 Vue Academy ?

Aucune expérience préalable n'est requise. Vue 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 2 sur 3.

Combien de temps prend la leçon « Conditions et boucles » ?

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 Vue Academy ?

Oui. Chaque leçon Vue 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

← Retour à Vue Academy