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/conditional.md
+9-9
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ order: 7
6
6
7
7
## `v-if`
8
8
9
-
Dans les templates de chaines, par exemple Handlebars, nous pouvons écrire un bloc conditionnel comme ceci :
9
+
Dans les templates de chaines, par exemple Handlebars, nous pouvons écrire une structure conditionnelle comme ceci :
10
10
11
11
```html
12
12
<!-- Template de Handlebars -->
@@ -21,14 +21,14 @@ Dans Vue, nous utilisons la directive `v-if` pour obtenir la même chose :
21
21
<h1v-if="ok">Oui</h1>
22
22
```
23
23
24
-
Il est également possible d’ajouter un bloc « sinon » avec `v-else` :
24
+
Il est également possible d’ajouter une structure « sinon » avec `v-else` :
25
25
26
26
```html
27
27
<h1v-if="ok">Oui</h1>
28
28
<h1v-else>Non</h1>
29
29
```
30
30
31
-
### Groupes conditionnels avec `v-if`sur`<template>`
31
+
### Groupes conditionnels avec `v-if`dans un`<template>`
32
32
33
33
Comme `v-if` est une directive, elle doit être attachée à un seul élément. Mais comment faire si nous voulons permuter plusieurs éléments ? Dans ce cas, nous pouvons utiliser `v-if` sur un élément `<template>`, qui sert d'enveloppe invisible. Le résultat final rendu n’inclura pas l’élément `<template>`.
34
34
@@ -42,7 +42,7 @@ Comme `v-if` est une directive, elle doit être attachée à un seul élément.
42
42
43
43
### `v-else`
44
44
45
-
Vous pouvez utiliser la directive `v-else` pour indiquer un « bloc sinon » pour `v-if` :
45
+
Vous pouvez utiliser la directive `v-else` pour indiquer une « structure sinon » pour `v-if` :
46
46
47
47
```html
48
48
<divv-if="Math.random() > 0.5">
@@ -57,9 +57,9 @@ Un élément `v-else` doit immédiatement suivre un élément `v-if` ou un élé
57
57
58
58
### `v-else-if`
59
59
60
-
> Nouveau dans 2.1.0
60
+
> Nouveau dans la 2.1.0
61
61
62
-
Le `v-else-if`, comme le nom le suggère, sert comme un « bloc sinon si » pour `v-if`. Il peut également être enchaîné plusieurs fois :
62
+
Le `v-else-if`, comme le nom le suggère, sert comme une « structure sinon si » pour `v-if`. Il peut également être enchaîné plusieurs fois :
63
63
64
64
```html
65
65
<divv-if="type === 'A'">
@@ -180,15 +180,15 @@ Une autre option pour afficher conditionnellement un élément est la directive
180
180
<h1v-show="ok">Bonjour !</h1>
181
181
```
182
182
183
-
La différence est qu'un élément avec `v-show` sera toujours restitué et restera dans le DOM; `v-show` permute simplement la propriété CSS `display` de l'élément.
183
+
La différence est qu'un élément avec `v-show` sera toujours restitué et restera dans le DOM; `v-show` permute simplement la propriété CSS `display` de l'élément.
184
184
185
185
<pclass="tip">Notez que `v-show` ne prend pas en charge la syntaxe de `<template>` et ne fonctionne pas avec `v-else`.</p>
186
186
187
187
## `v-if` vs `v-show`
188
188
189
-
`v-if` est un « vrai » rendu conditionnel car il garantit que les écouteurs d'événements et les composants enfants à l'intérieur du bloc conditionnel soient correctement détruits et recréés lors des permutations.
189
+
`v-if` est un « vrai » rendu conditionnel car il garantit que les écouteurs d'événements et les composants enfants à l'intérieur de la structure conditionnelle soient correctement détruits et recréés lors des permutations.
190
190
191
-
`v-if` est également **paresseux** : si la condition est fausse sur le rendu initial, il ne fera rien (le bloc conditionnel sera rendu quand la condition sera vraie pour la première fois).
191
+
`v-if` est également **paresseux** : si la condition est fausse sur le rendu initial, il ne fera rien (la structure conditionnelle sera rendue quand la condition sera vraie pour la première fois).
192
192
193
193
En comparaison, `v-show` est beaucoup plus simple (l’élément est toujours rendu indépendamment de la condition initiale, avec juste une simple permutation basée sur du CSS).
0 commit comments