Comment implémenter le rendu conditionnel dans Vue.js

Vue.js est un framework JavaScript populaire qui facilite la création d'applications Web dynamiques. Vue.js peut restituer du contenu en fonction de données et d'événements. Ceci est particulièrement utile pour créer des interfaces utilisateur réactives et interactives.

Découvrez ce que sont les directives Vue et comment les utiliser pour obtenir un rendu conditionnel dans Vue.js.

Que sont les directives Vue?

Les directives Vue vous permettent d'améliorer le comportement des éléments HTML dans les modèles Vue.js en leur ajoutant des attributs uniques.

Les directives sont une partie fondamentale de Vue.js et fournissent un moyen simple et puissant de manipuler le Modèle d'objet de document (DOM), ajouter un comportement dynamique aux éléments et gérer les données.

De plus, Vue.js vous permet de créer des directives personnalisées, ce qui vous permet de créer facilement des fonctions réutilisables pour les applications Vue.

Le framework Vue préfixe ses directives avec "v-" avant le nom de la directive. Des exemples de directives couramment utilisées dans Vue incluent v-sur, liaison v, v-pour, et v-si.

Qu'est-ce que le rendu conditionnel?

Le rendu conditionnel vous permet d'afficher ou de masquer des éléments en fonction des conditions que vous spécifiez. Par exemple, vous pouvez utiliser le rendu conditionnel pour afficher un message aux utilisateurs uniquement s'ils ont saisi une adresse e-mail valide.

Dans Vue.js, vous pouvez utiliser des directives telles que v-si et v-spectacle pour obtenir un rendu conditionnel dans votre application, différent de la façon dont vous le feriez rendre le contenu de manière conditionnelle dans React.js.

Obtenir un rendu conditionnel avec la directive v-if

Semblable à le Javascript sinon déclaration, le v-si directive dans Vue.js contient une condition. S'il n'est pas satisfait, Vue.js évalue la condition suivante spécifiée dans un v-autre directive et continue ainsi jusqu'à ce qu'il remplisse une condition ou évalue toutes les conditions.

Cette directive vous permet de rendre conditionnellement un élément basé sur une valeur booléenne. Le compilateur Vue.js ne rendra pas la partie si sa valeur est fausse.

Voici un exemple de rendu de contenu conditionnel avec v-si:

html>
<htmllangue="fr">
<diriger>
<titre>Documenttitre>
<scénariosrc=" https://unpkg.com/vue@3/dist/vue.global.js">scénario>
diriger>
<corps>
<dividentifiant="application">
<h1v-si='FAUX' >{{ message1 }}h1>
<h1v-autre >{{ message2 }}h1>
div>
<scénario>
 const app = Vue.createApp({
 données () {
 retour {
 message1: 'Ceci est votre application Vue.',
 message2: 'Pas encore une application Vue.'
 }
 }
 })
 app.mount('#app')
scénario>
corps>
html>

Le bloc de code ci-dessus représente une application Vue créée en ajoutant un Réseau de diffusion de contenu (CDN) lien vers le corps de votre fichier HTML. La directive v-if rendra l'élément h1 uniquement si sa condition est vraie.

Dans les applications Vue, il existe des situations où vous devez restituer un composant en fonction de critères dynamiques spécifiques. Ceci est utile dans des scénarios tels que l'affichage d'informations uniquement lorsqu'un utilisateur clique sur un bouton ou l'affichage d'un indicateur de chargement pendant le chargement des données à partir d'une API.

Par exemple:

html>
<htmllangue="fr">
<diriger>
<titre>Application Vuetitre>
<scénariosrc=" https://unpkg.com/vue@3/dist/vue.global.js">scénario>
diriger>
<corps>
<dividentifiant="application">
<divv-si="afficher les utilisateurs">
<ul>
<li>Utilisateur1li>
<li>Utilisateur2li>
ul>
div>
<boutonv-on: cliquez="basculerAfficherUtilisateurs()">
 Basculer les utilisateurs
bouton>
<h1>{{ message }}h1>
div>
<scénario>
 const app = Vue.createApp({
 données () {
 retour {
 showUsers: vrai,
 message: 'Ceci est votre application Vue.'
 }
 },
 méthodes: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
scénario>
corps>
html>

Le bloc de code ci-dessus utilise le v-si directive pour restituer conditionnellement le contenu en fonction de la valeur d'une variable booléenne, afficherUtilisateurs.

Le div l'élément est affiché si la valeur est vrai et caché si c'est le cas FAUX. En cliquant sur le Basculer les utilisateurs bouton déclenche le toggleShowUsers() méthode pour changer la valeur de afficherUtilisateurs.

Cet exemple utilise également le v-sur directive pour écouter les événements, comme un événement de clic sur le bouton. Il réévalue la v-si directive chaque fois que la valeur de afficherUtilisateurs changements.

Obtenir un rendu conditionnel avec la directive v-show

Le v-spectacle La directive est un autre moyen d'afficher ou de masquer des éléments dans Vue.js de manière conditionnelle. C'est semblable au v-si directive en ce qu'elle peut restituer des éléments basés sur une expression booléenne. Cependant, il existe des différences critiques entre les deux directives.

Le v-spectacle La directive ne supprime pas l'élément du DOM lorsque l'expression est évaluée à false. Au lieu de cela, il utilise CSS pour basculer l'élément afficher propriété entre aucun et sa valeur d'origine.

Cela signifie que l'élément est toujours présent dans le DOM mais n'est pas visible lorsque l'expression est fausse.

Voici un exemple :

<corps>
<dividentifiant="application">
<divv-si="afficher les utilisateurs">
<ul>
<li>Utilisateur1li>
<li>Utilisateur2li>
ul>
div>
<boutonv-on: cliquez="basculerAfficherUtilisateurs()">
 Basculer les utilisateurs
bouton>
<h1v-spectacle="afficher les utilisateurs">{{ message }}h1>
div>
<scénario>
 const app = Vue.createApp({
 données () {
 retour {
 showUsers: vrai,
 message: 'Ce sont les utilisateurs de l'application Vue'
 }
 },
 méthodes: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
scénario>
corps>

Le bloc de code ci-dessus utilise le v-spectacle directive pour afficher un message indiquant, 'Ce sont les utilisateurs de l'application Vue' chaque fois que vous cliquez sur le bouton bascule.

Choisir entre v-if et v-show

Au moment de décider entre l'utilisation de la v-si et v-spectacle directives pour afficher ou masquer des éléments dans Vue.js de manière conditionnelle, certains facteurs importants doivent être pris en compte.

Lorsque la condition change rarement, en utilisant le v-si la directive est bonne. Ceci est dû au fait v-si supprime l'élément du DOM lorsque la condition est fausse, ce qui peut entraver les performances optimales. L'élément n'est rendu que lorsque la condition devient vraie et supprimé du DOM lorsque la condition redevient fausse.

D'autre part, si la condition est susceptible de changer fréquemment, il est préférable d'utiliser le v-spectacle directive, ce qui améliore les performances. Ceci est dû au fait v-spectacle utilise CSS pour masquer ou afficher l'élément en basculant la propriété d'affichage CSS entre aucun et bloc, laissant l'élément toujours rendu au DOM.

Le rendu conditionnel dans votre application Vue en toute simplicité

Vous avez appris à rendre le contenu de manière conditionnelle dans les applications Vue avec les directives v-if et v-show. En utilisant ces directives, vous pouvez rapidement restituer du contenu en fonction de diverses conditions, ce qui vous donne plus de contrôle sur l'apparence et le comportement de vos composants Vue.