You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/v2/guide/class-and-style.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -4,9 +4,9 @@ type: guide
4
4
order: 6
5
5
---
6
6
7
-
Un besoin classique de la **liaison de données**, est de manipuler la *liste des classes* et le *style*d'un élément. Puisque ce sont tous deux des attributs, il est possible d'utiliser `v-bind` pour les gérer : Il est seulement nécessaire de générer une chaîne de caractère avec notre expression. Cependant, jouer avec des concaténations de chaîne de caractères est ennuyant, et source d'erreur. Pour cette raison, Vue fournit des améliorations spéciales 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.
7
+
Un besoin classique de la liaison de données est la manipulation de la liste des classesd'un élément, ainsi que ses style 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, jouer avec des concaténations de chaîne de caractères est fastidieux, et source d'erreur. Pour cette raison, Vue fournit des améliorations spéciales 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.
8
8
9
-
## Lier l'attribut "class"
9
+
## Liaison de Classes HTML
10
10
11
11
### Syntaxe Objet
12
12
@@ -16,7 +16,7 @@ Il est possible de donner un objet à `v-bind:class` pour permuter les classes a
16
16
<divv-bind:class="{ active: isActive }"></div>
17
17
```
18
18
19
-
La syntaxe ci-dessus signifie que la présence de la classe `active` sera déterminé par la [véracité](https://developer.mozilla.org/fr/docs/Glossaire/Truthy) de la propriété `isActive`.
19
+
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).
20
20
21
21
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 :
22
22
@@ -143,17 +143,17 @@ C'est aussi vrai pour la liaison de classe :
Quand `isActive` est évalué à vrai, le rendu HTML sera :
147
147
148
148
```html
149
149
<pclass="foo bar active"></p>
150
150
```
151
151
152
-
## Lier l'attribut "style"
152
+
## Liaison de Styles HTML
153
153
154
154
### Syntaxe objet
155
155
156
-
La syntaxe objet pour `v-bind:style` est assez simple - cela ressemble presque à CSS, sauf que c'est un objet Javascript. Vous pouvez utiliser camelCase ou kebab-case (utilisez des apostrophes avec kebab-case) pour les noms des propriétés CSS :
156
+
La syntaxe objet pour `v-bind:style` est assez simple - cela ressemble presque à CSS, sauf que c'est un objet JavaScript. Vous pouvez utiliser camelCase ou kebab-case (utilisez des apostrophes avec kebab-case) pour les noms des propriétés CSS :
0 commit comments