Liaisons dynamiques et multiples avec v-bind
Noms d’attributs dynamiques :[dynamicAttr], syntaxe objet de v-bind, liaison de plusieurs attributs à la fois.
Liaisons dynamiques et multiples avec v-bind est une leçon Vue 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Lier des attributs dynamiquement
La directive v-bind (abrégée en :) relie un attribut HTML à une valeur réactive. Elle permet de gérer des classes, des styles et même des attributs dont le nom est dynamique.
v-bind de base
Lie n’importe quel attribut à une expression. Lorsque la valeur change, Vue met à jour l’attribut.
<img :src="imageUrl" :alt="description" />Liaison de classes : syntaxe objet
Pour les classes, la syntaxe objet active ou désactive une classe selon une valeur évaluée comme vraie ou fausse. La clé est le nom de la classe ; la valeur détermine si elle s’applique.
<div :class="{ active: isActive, disabled: isDisabled }"></div>Liaison de classes : syntaxe tableau
La syntaxe tableau applique une liste de classes. Mélangez des chaînes statiques et des variables réactives, ou imbriquez un objet pour les entrées conditionnelles.
<div :class="[baseClass, isActive ? activeClass : '']"></div>Combiner tableaux et objets
Vous pouvez imbriquer la forme objet dans le tableau pour profiter des deux approches : des classes toujours actives et des classes conditionnelles.
<div :class="[baseClass, { active: isActive }]"></div>Liaison de styles : syntaxe objet
Liez des styles en ligne avec un objet. Utilisez des noms de propriétés en camelCase (ou en kebab-case entre guillemets). Les valeurs peuvent être réactives.
<div :style="{ color: textColor, fontSize: size + 'px' }"></div>Liaison de styles : tableau d’objets
Transmettez un tableau d’objets de styles pour fusionner plusieurs sources de styles, comme un style de base et une surcharge de thème.
<div :style="[baseStyles, overrideStyles]"></div>Lier plusieurs attributs à la fois
v-bind sans argument déploie sur l’élément un objet complet d’attributs. Chaque clé devient un attribut.
<script setup>
const attrs = { id: 'main', class: 'box', 'data-role': 'panel' }
</script>
<template>
<div v-bind="attrs"></div>
</template>Noms d’attributs dynamiques
Utilisez des crochets pour calculer le nom de l’attribut lui-même lors de l’exécution. L’expression entre crochets est évaluée et utilisée comme clé de l’attribut.
<script setup>
const attrName = 'title'
const attrValue = 'Hello'
</script>
<template>
<div :[attrName]="attrValue"></div>
</template>Quand utiliser chaque syntaxe
- Syntaxe objet pour les classes — activer ou désactiver plusieurs classes selon une condition.
- Syntaxe tableau pour les classes — combiner une classe de base et des conditions.
v-bind="obj"— transmettre un ensemble complet d’attributs.- Nom dynamique
:[name]— lorsque la clé de l’attribut est déterminée lors de l’exécution.
Un exemple combiné
Cet élément utilise simultanément une classe dynamique, un style dynamique et des attributs déployés — le tout de manière réactive.
<div
:class="[base, { active: isActive }]"
:style="{ color: textColor }"
v-bind="extraAttrs"
></div>Vérification rapide
Vérifiez vos connaissances de v-bind.
Récapitulatif
Vous avez découvert toute l’étendue de v-bind :
- La syntaxe objet des classes active ou désactive les classes selon une condition ; la syntaxe tableau les combine.
- La liaison de styles utilise des objets (camelCase) ou des tableaux d’objets.
v-bind="obj"déploie tous les attributs d’un objet.:[name]="val"lie un attribut dont le nom est dynamique.
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
Questions Fréquemment Posées
La leçon « Liaisons dynamiques et multiples avec v-bind » est-elle gratuite ?
Oui — le texte complet de « Liaisons dynamiques et multiples avec v-bind » 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 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Liaisons dynamiques et multiples avec v-bind » ?
Noms d’attributs dynamiques :[dynamicAttr], syntaxe objet de v-bind, liaison de plusieurs attributs à la fois. 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 3 sur 4.
Combien de temps prend la leçon « Liaisons dynamiques et multiples avec v-bind » ?
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
- v-model : mécanismes de la liaison bidirectionnelle
- Modificateurs d’événements v-on
- Liaisons dynamiques et multiples avec v-bind
- Écrire des directives personnalisées