Dans cette leçon, nous allons étudier le concept de rendu conditionnel.
Notre objectif
Nous voulons afficher différents éléments HTML en fonction d’une condition. Nous afficherons une balise p qui indique « en stock » lorsque notre produit est en stock, ou une balise qui indique « En rupture » lorsqu’il ne l’est pas.
Préparer notre rendu conditionnel
Dans notre fichier index.html, nous allons ajouter deux nouvelles balises p.
- index.html
<p>En stock</p>
<p>En rupture</p>
Nous voulons qu’un seul de ces éléments s’affiche selon que notre produit est en stock ou non, nous allons donc nous rendre dans l’objet de données de notre application Vue et ajouter un nouveau booléen inStock.
- main.js
const app = Vue.createApp({
data() {
return {
product: 'T-Shirt',
image: './assets/images/t-shirt-bleu',
inStock: true
}
}
})
Maintenant que nous avons ajouté les éléments que nous voulons pour réaliser notre rendu conditionnel, la condition (inStock) que nous utiliserons décidera lequel s’affichera.
La directive v-if
Nous pouvons ajouter la directive v-if à un élément pour le rendre en fonction d’une condition, comme suit :
<p v-if="inStock">En stock</p>
Maintenant, cet élément ne sera rendu que si inStock est vrai.
Nous pouvons combiner la directive v-if avec sa sœur v-else pour afficher un autre élément comme solution de repli si la première condition s’avère fausse.
- index.html
<p v-if="inStock">En stock</p>
<p v-else>En rupture</p>
Now, if inStock is false, we’ll see “En rupture” gets rendered to the page.
Afficher ou masquer
Il convient de noter que vous n’avez pas toujours besoin de coupler v-if et v-else. Il existe de nombreux cas d’utilisation où vous n’avez pas besoin d’un élément de repli à rendre. Cependant, dans ces cas, il est parfois préférable d’utiliser la directive v-show.
<p v-show="inStock">En stock</p>
La directive v-show est utilisée pour faire basculer la visibilité d’un élément au lieu d’ajouter et de supprimer l’élément du DOM entièrement, comme le fait v-if.
Comme vous pouvez l’imaginer, cette option est plus performante si vous avez un élément qui s’éteint et s’allume souvent à l’écran. Nous pouvons le vérifier en définissant inStock à false et en visualisant l’élément dans les outils de développement du navigateur. Lorsque v-show est utilisé, nous pouvons voir que l’élément est toujours présent dans le DOM, mais qu’il est maintenant caché avec du style en ligne display: none;
Logique conditionnelle chaînée
Plus tôt, nous avons examiné le v-if avec le v-else, maintenant regardons comment nous pouvons ajouter du code supplémentaires de logique conditionnelle.
Pour ce faire, nous allons remplacer inStock par inventory :
- main.js
const app = Vue.createApp({
data() {
return {
...
inventory: 100
}
- index.html
<p v-if="inventory > 10">En stock</p>
<p v-else>En rupture</p>
Maintenant, nous ne rendrons la première balise p que si le inventory est supérieur à 10.
Disons que nous voulons afficher un nouveau message lorsque le produit est presque épuisé. Dans cette situation, nous pourrions ajouter un autre niveau conditionnel, où nous surveillerions que inventory soit inférieur à 10 mais supérieur à 0.
- index.html
<p v-if="inventory > 10">En stock</p>
<p v-else-if="inventory <= 10 && inventory > 0">Presque en rupture!</p>
<p v-else>En rupture</p>
La directive v-else-if nous donne une couche intermédiaire de logique. Ainsi, dans cet exemple, si le stock est de 8, cette balise p sera rendue.
Bien sûr, si le stock est nul, nous passerons au dernier niveau de v-else et afficherons « En rupture ».
Ressources
Pensez à télécharger le code de départ pour commencer cette étape du tutoriel dans de bonnes conditions.
Newsletter
Ne manquez jamais les nouveaux conseils, tutoriels et autres.
Pas de spam, jamais. Nous ne partagerons jamais votre adresse électronique et vous pouvez vous désabonner à tout moment.