Comment lier les classes et les styles dynamiquement dans Vue?

Question

Accepted Answer

Vue donne à `:class` et `:style` une **syntaxe spéciale d'objets et de tableaux** afin que vous puissiez appliquer conditionnellement des classes et des styles inline en fonction de l'état réactif — plus propre que de construire manuellement des chaînes de classes. ## Syntaxe d'objet pour :class — basculer les classes selon une condition ```vue ``` Chaque clé est un nom de classe et chaque valeur est une condition booléenne — la classe n'apparaît que lorsque sa valeur est truthy. C'est le modèle le plus courant pour le style basé sur l'état (onglets actifs, états d'erreur, etc.). ## Syntaxe de tableau pour :class — combiner plusieurs ```vue ``` ## :class fusionne avec l'attribut static class ```vue

...

``` Vous pouvez utiliser à la fois `class` et `:class` ensemble; Vue les fusionne. ## Syntaxe d'objet/tableau pour :style ```vue ``` ## Lier les classes sur les composants ```vue ``` ## Pourquoi c'est important La liaison dynamique de classes/styles est un travail quotidien Vue — mettre en évidence l'élément nav actif, afficher les erreurs de validation, thématiser. La syntaxe d'objet (`{ className: condition }`) rend le style conditionnel déclaratif et lisible, en évitant la concaténation de chaînes manuelle sujette aux erreurs. Savoir que `:class` fusionne avec `class` statique, et la forme de tableau pour combiner les sources, couvre pratiquement tous les besoins de style conditionnel de manière propre.