|
6 | 6 |
|
7 | 7 | ## `v-if`
|
8 | 8 |
|
9 |
| -Dans les templates de chaines, par exemple Handlebars, nous pouvons écrire une structure conditionnelle comme ceci : |
| 9 | +Dans les templates en chaîne de caractères, par exemple Handlebars, nous pouvons écrire une structure conditionnelle comme ceci : |
10 | 10 |
|
11 | 11 | ``` html
|
12 | 12 | <!-- Template de Handlebars -->
|
@@ -126,7 +126,7 @@ new Vue({
|
126 | 126 | </script>
|
127 | 127 | {% endraw %}
|
128 | 128 |
|
129 |
| -Ce n’est pas toujours souhaitable, donc Vue vous offre un moyen de dire, « Ces deux éléments sont complètement distincts - ne les réutilise pas. ». Ajoutez juste un attribut `key` avec des valeurs uniques : |
| 129 | +Ce n’est pas toujours souhaitable cependant, c'est pourquoi Vue vous offre un moyen de dire, « Ces deux éléments sont complètement distincts - ne les réutilise pas. ». Ajoutez juste un attribut `key` avec des valeurs uniques : |
130 | 130 |
|
131 | 131 | ``` html
|
132 | 132 | <template v-if="loginType === 'username'">
|
@@ -186,13 +186,13 @@ La différence est qu'un élément avec `v-show` sera toujours restitué et rest
|
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 de la structure conditionnelle 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 sont correctement détruits et recréés lors des permutations. |
190 | 190 |
|
191 | 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).
|
194 | 194 |
|
195 |
| -D'une manière générale, `v-if` a des coûts de permutations plus élevés alors que `v-show` a des coûts de rendus initiaux plus élevés. Donc préférez `v-show` si vous avez besoin de permuter quelque chose très souvent et préférez `v-if` si la condition ne change probablement pas à l'exécution. |
| 195 | +D'une manière générale, `v-if` a des coûts à la permutations plus élevés alors que `v-show` a des coûts au rendu initial plus élevés. Donc préférez `v-show` si vous avez besoin de permuter quelque chose très souvent et préférez `v-if` si la condition ne change probablement pas à l'exécution. |
196 | 196 |
|
197 | 197 | ## `v-if` avec `v-for`
|
198 | 198 |
|
|
0 commit comments