Rendu/affichage conditionnel dans Vue avec v-if, v-show, v-else et v-else-if

Introduction

Vue.js est un framework d'application Web simple permettant de créer des interfaces Web dynamiques et Applications à page unique (SPA). Lorsque nous créons ces applications, nous souhaitons souvent rendre quelque chose en fonction d'un critère particulier – c’est l’essence du rendu conditionnel.

Le rendu conditionnel fait référence à la possibilité de restituer un balisage d'interface utilisateur (UI) distinct selon qu'une condition est vraie ou non. Cette notion est fréquemment utilisée dans des contextes tels que l'affichage ou le masquage de composants (basculement), le changement de fonctionnalité d'application, la gestion de l'authentification et de l'autorisation, et bien d'autres encore.

Dans cet article, nous examinerons différentes manières de rendre conditionnellement dans Vue.js en utilisant le v-if, v-else-ifet une v-else directives. Nous examinerons également quelques exemples et soulignerons la différence entre les v-if et les v-show.

v-si

La v-if la directive est utilisée pour rendre conditionnellement un bloc c'est-à-dire le bloc avec le v-if l'attribut ne sera que produit si l'expression de la directive renvoie un true valeur. Si l'expression produit un résultat non valide (par exemple, null, 0, chaîne vide, false), l'élément est supprimé des DOM.

Illustrons ce comportement sur l'exemple pratique :

<div v-if="login"> <p>This user has been logged in!... Welcome.</p>
</div> <script>
export default { data() { return { login: true, }; }
};
</script>

Depuis que login est fixé à true, <div> bloc contenant v-if La directive sera produite, donc affichée.

v-si vs v-show

Il est à noter que le v-show fonctionnerait également dans l'exemple ci-dessus et fonctionnerait apparemment de manière identique, mais il existe une distinction entre les deux.

v-if rend conditionnellement un élément, alors que v-show affiche/affiche conditionnellement un élément.

Cela implique que lorsque le conditionnel est basculé, v-if supprimera et restaurera réellement les composants v-show les rend simplement invisibles ou visibles. L'animation suivante illustre comment v-if supprime et reproduit en fait les blocs de code :

Pendant ce temps, v-show conservera toujours l'élément dans le DOM et changera simplement son CSS pour basculer son apparence (en définissant son display à none):

v-sinon

La v-else la directive est une v-if directive qui vous permet de personnaliser le false valeur dans les rendus conditionnels. Si ce n'est pas le cas true, Vous pouvez utiliser v-else pour définir ce qui devrait se passer à la place.

Par exemple, supposons que nous saisissions un mot de passe et que nous souhaitions qu'il produise un message d'erreur, « Mot de passe faible », si la longueur de l'entrée est inférieure à 6 ou si l'affichage « Mot de passe fort » si la longueur est supérieure à 6.

Il s'agit d'un rendu conditionnel, avec une option pour gérer les faux cas :

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length > 6">Strong Password</p> <p v-else>Weak Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

Utilisons ceci pour basculer le contenu d'une simple page de connexion afin de modifier le message selon qu'un utilisateur est connecté ou non. Nous modifierons le libellé du bouton en fonction du userLoggedIn statut également :

<div id="app"> <div v-if="userLoggedIn"> <h2>Hello Welcome!</h2> <p>You have sucessfully logged in to your user account!</p> </div> <div v-else> <p>Please Log In to access your account!</p> </div> <button @click="userLoggedIn = !userLoggedIn"> <p v-if="!userLoggedIn">Login</p> <p v-else>LogOut</p> </button>
</div> <script>
export default { data() { return { userLoggedIn: false }; }
};
</script>

L'événement de clic du bouton fera basculer le userLoggedIn élément de données, et cela affectera les données affichées comme indiqué ci-dessous :

v-sinon-si

v-else-if extends a v-if peut comprendre un atténuateur. else...if bloc. Ceci est similaire à celui de JavaScript else...if bloquer en ce sens qu'il nous permet d'ajouter une instruction if à un v-if. Ceci est utilisé lorsqu'il y a de nombreux critères à vérifier et peut être chaîné plusieurs fois :

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length < 4">Weak Password</p> <p v-else-if="password.length < 7">Fairly Strong Password</p> <p v-else>Strong Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

Conclusion

Dans cet article, nous avons vu comment rendre conditionnellement un élément avec v-if, v-elseet une v-else-if. Nous avons également expliqué la différence entre v-if et les v-show.

• Coinsmart. Le meilleur échange Bitcoin et Crypto d'Europe.
• Platoblockchain. Intelligence métaverse Web3. Connaissance amplifiée. ACCÈS LIBRE.
• CryptoHawk. Radar Altcoins. Essai gratuit.
• Source : https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/