<commit_before>---
title: Liaisons de classes et de styles
type: guide
order: 6
---

Un besoin classique de la liaison de données est la manipulation de la liste des classes d'un élément, ainsi que ses styles en ligne. Puisque ce sont tous deux des attributs, il est possible d'utiliser `v-bind`  pour les gérer : Il faut simplement générer une chaîne de caractère avec nos expressions. Cependant la concaténation de chaîne de caractères est fastidieuse, et source d'erreur. Pour cette raison, Vue fournit des améliorations spécifiques quand `v-bind` est utilisé avec `class` et `style`. En plus des chaînes de caractères, l'expression peut évaluer des objets ou des tableaux.

## Liaison de Classes HTML

### Syntaxe Objet

Il est possible de passer un objet à `v-bind:class` pour permuter les classes automatiquement :

``` html
<div v-bind:class="{ active: isActive }"></div>
```

La syntaxe ci-dessus signifie que la classe `active` sera présente si la propriété `isActive` est [évaluée à vrai](https://developer.mozilla.org/fr/docs/Glossaire/Truthy).

Vous pouvez permuter plusieurs classes en ayant plus de champs dans l'objet. De plus, la directive `v-bind:class` peut aussi coexister avec l'attribut `class`. Donc, avec le template suivant :

``` html<commit_msg>Change translation of truthiness<commit_after>---
title: Liaisons de classes et de styles
type: guide
order: 6
---

Un besoin classique de la liaison de données est la manipulation de la liste des classes d'un élément, ainsi que ses styles en ligne. Puisque ce sont tous deux des attributs, il est possible d'utiliser `v-bind`  pour les gérer : Il faut simplement générer une chaîne de caractère avec nos expressions. Cependant la concaténation de chaîne de caractères est fastidieuse, et source d'erreur. Pour cette raison, Vue fournit des améliorations spécifiques quand `v-bind` est utilisé avec `class` et `style`. En plus des chaînes de caractères, l'expression peut évaluer des objets ou des tableaux.

## Liaison de Classes HTML

### Syntaxe Objet

Il est possible de passer un objet à `v-bind:class` pour permuter les classes automatiquement :

``` html
<div v-bind:class="{ active: isActive }"></div>
```

La syntaxe ci-dessus signifie que la classe `active` sera présente si la propriété `isActive` est [considérée comme vrai](https://developer.mozilla.org/fr/docs/Glossaire/Truthy).

Vous pouvez permuter plusieurs classes en ayant plus de champs dans l'objet. De plus, la directive `v-bind:class` peut aussi coexister avec l'attribut `class`. Donc, avec le template suivant :

``` html
{'fraction_non_alphanumeric': 0.07866043613707165, 'fraction_numerical': 0.000778816199376947, 'mean_word_length': 4.708888888888889, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1187494', 'n_tokens_mistral': 811, 'n_tokens_neox': 802, 'n_words': 356}