- Doc
-
Écosystème
Aide
Outils
Bibliothèques officielles
Infos
Liste de ressources
- Équipe
- Soutien
- Langues
Guide
Essentiel
- Installation
- Introduction
- L'instance de Vue
- Syntaxe de template
- Propriétés calculées et observateurs
- Liaisons de classes et de styles
- Rendu conditionnel
- Rendu de liste
- Gestion des évènements
- Liaisons sur les champs de formulaire
- Composants
Components In-Depth
- Component Registration
- Props
- Custom Events
- Slots
- Dynamic & Async Components
- Handling Edge Cases
Transitions & animation
- Transitions d'entrée, de sortie et de liste
- Transitions d'état
Réusabilité & composition
- Mixins
- Directives personnalisées
- Fonctions de rendu et JSX
- Plugins
- Filtres
Outils
- Déploiement en production
- Composants monofichiers
- Tests unitaires
- Support de TypeScript
Évolutions
- Routage
- Gestion de l'état
- Rendu côté serveur
Mécanismes
- Réactivité dans le détail
Migration
- Migration depuis Vue 1.x
- Migration depuis Vue Router 0.7.x
- Migration depuis Vuex 0.6.x à 1.0
Meta
- Comparaison avec les autres frameworks
- Rejoignez la communauté Vue.js !
- Rencontrer l'équipe
Rendu conditionnel
v-if
Dans les templates en chaine de caractères, par exemple Handlebars, nous pouvons écrire une structure conditionnelle comme ceci :
<!-- Template de Handlebars --> |
Dans Vue, nous utilisons la directive v-if
pour obtenir la même chose :
<h1 v-if="ok">Oui</h1> |
Il est également possible d’ajouter une structure « sinon » avec v-else
:
<h1 v-if="ok">Oui</h1> |
Groupes conditionnels avec v-if
dans un <template>
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>
.
<template v-if="ok"> |
v-else
Vous pouvez utiliser la directive v-else
pour indiquer une « structure sinon » pour v-if
:
<div v-if="Math.random() > 0.5"> |
Un élément v-else
doit immédiatement suivre un élément v-if
ou un élément v-else-if
(sinon il ne sera pas reconnu).
v-else-if
Nouveau dans la 2.1.0+
Le v-else-if
, comme le nom le suggère, sert comme une « structure sinon si » pour v-if
. Il peut également être enchainé plusieurs fois :
<div v-if="type === 'A'"> |
Semblable à v-else
, un élément v-else-if
doit immédiatement suivre un élément v-if
ou un élément v-else-if
.
Contrôle des éléments réutilisables avec key
Vue tente de restituer les éléments aussi efficacement que possible, en les réutilisant souvent au lieu de faire de la restitution à partir de zéro. En plus de permettre à Vue d’être très rapide, cela peut avoir quelques avantages utiles. Par exemple, si vous autorisez les utilisateurs à choisir entre plusieurs types de connexion :
<template v-if="loginType === 'username'"> |
Le fait de changer de loginType
dans le code ci-dessus n’effacera pas ce que l’utilisateur a déjà saisi. Puisque les deux templates utilisent les mêmes éléments, le <input>
n’est pas remplacé (juste son placeholder
).
Vérifiez-le par vous-même en entrant un texte dans la zone de saisie, puis en appuyant sur le bouton de permutation :
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 :
<template v-if="loginType === 'username'"> |
Maintenant ces zones de saisie seront restituées à partir de zéro à chaque fois que vous permuterez. Voyez par vous-même :
Remarquez que les éléments <label>
sont réutilisés efficacement, car ils n’ont pas d’attributs key
.
v-show
Une autre option pour afficher conditionnellement un élément est la directive v-show
. L’utilisation est en grande partie la même :
<h1 v-show="ok">Bonjour !</h1> |
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.
Notez que v-show
ne prend pas en charge la syntaxe de l’élément <template>
et ne fonctionne pas avec v-else
.
v-if
vs v-show
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.
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).
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.
D’une manière générale, v-if
a des couts à la permutation plus élevés alors que v-show
a des couts 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.
v-if
avec v-for
Lorsqu’il est conjointement utilisé avec v-for
, v-for
a une priorité plus élevée que v-if
. Consultez le guide du rendu de liste pour plus de détails.