Rendu conditionnel dans Vue

Examinons trois directives Vue pour le rendu conditionnel.

Dans cet article, nous verrons comment rendre les modèles Vue en fonction des conditions prédéfinies que nous avons définies.

Rendu conditionnel dans Vue

Lors de la création de votre application Vue.js, il est généralement nécessaire d'afficher des éléments de modèle en fonction d'éléments tels que les données, le comportement de l'utilisateur ou les entrées. Vue a des directives intégrées que vous pouvez utiliser pour faire exactement cela. Pensez à tous lessinonetsinon/sique vous avez apprises en JavaScript ou dans tout autre langage—Vue s'assure que vous n'avez pas à réapprendre ces choses.

Les types

Vue a quelques directives que vous pouvez utiliser pour obtenir facilement un rendu conditionnel dans votre application. Certains d'entre eux incluent:

1. La directive v-if
2. La directive v-else
3. La directive v-else-if
4. La directive v-show
5. La directive v-for

Aujourd'hui, nous allons examiner les trois premières directives, comment elles fonctionnent et comment nous pouvons les utiliser.

Avant de commencer

Pour suivre la démonstration de code, vous devez avoir installé les éléments suivants sur votre machine :

• Node.js
• Un éditeur de code : Visual Studio Code est fortement recommandé (Voici pourquoi)
• Vue CLI 3.0

Commencer

Nous utiliserons l'outil Vue GUI pour créer une nouvelle application.

Ouvrez un nouveau terminal dans VS Code et exécutez la commande ci-dessous pour ouvrir le client Vue GUI.

vue ui

C'est l'écran que vous devriez voir.

Cliquez sur le bouton d'accueil en bas de page pour accéder à la page des projets.

Ici, choisissez un dossier de choix dans lequel vous souhaitez que le nouveau projet Vue soit créé et cliquez sur Créer un nouveau projet ici.

Appelez le nouveau projet « conditions » et cliquez sur Suivant.

Suivez l'invite et choisissez le préréglage par défaut. Donnez-lui quelques minutes et vous serez averti que votre application est maintenant construite avec succès.

Assurez-vous d'exécuter cette commande dans le nouveau projet :

installation npm

Vous pouvez maintenant exécuter l'application dans la barre des tâches ou utiliser la CLI pour l'exécuter :

npm exécuter servir

Il devrait afficher l'échafaudage d'un modèle d'application Vue.js dans votre navigateur.

Pour nettoyer l'application pour notre usage, accédez au fichier app.vue et remplacez le contenu par le bloc de code ci-dessous :

<modèle>
  <div identifiant="application">
    <image autre="Vue logo" src="./assets/logo.png">
    <h1>Bienvenue dans votre application Vue</h1>
  </div></modèle><scénario>exportation défaut {Nom: 'application',
}</scénario><style>#application{
  famille de polices: 'Avenir'Helvetica, Arial, sans empattement;
  -webkit-police-lissage:anticrénelé;
  -moz-osx-police-lissage:niveaux de gris;
  aligner le texte:centre;
  Couleur: #2c3e50;
  marge supérieure: 60pixels;
}</style>

Directive V-Si

Nous allons construire un simple composant de recherche de nombre pair et impair à partir des données du composant. La directive v-if affichera tout élément de modèle auquel elle est attachée tant que la condition définie est remplie. Affichons "Zéro" lorsque la base de données contient zéro.

<modèle>
  <div identifiant="application">
    <image autre="Vue logo" src="./assets/logo.png">
    <h1>Bienvenue dans votre application Vue</h1>
    <h2 v-si="chiffre === 0">Le chiffre dans votre base de données est zéro</h2>
  </div></modèle><scénario>exportation défaut {Nom: 'application',
  Les données(){
    retourner {chiffre:0
    }
  }
}</scénario><style>#application{
  famille de polices: 'Avenir'Helvetica, Arial, sans empattement;
  -webkit-police-lissage:anticrénelé;
  -moz-osx-police-lissage:niveaux de gris;
  aligner le texte:centre;
  Couleur: #2c3e50;
  marge supérieure: 60pixels;
}</style>

Ici, si vous avez enregistré le fichier et vérifié votre navigateur, il devrait ressembler à ceci :

Directive V-Else

Si vous changez la valeur du chiffre en quelque chose comme 10, rien ne sera affiché à partir de la base de données. C'est parce qu'il n'y a pas de nouvelle condition qui indique à Vue d'afficher quelque chose dans le cas où la condition de v-if n'est pas remplie. Ajoutons-en un :

<modèle>
  <div identifiant="application">
    <image autre="Vue logo" src="./assets/logo.png">
    <h1>Bienvenue dans votre application Vue</h1>
    <h2 v-si="chiffre === 0">Le chiffre dans votre base de données est zéro</h2>
    <h2 v-autre>Le chiffre dans votre base de données n'est pas nul</h2>
  </div></modèle><scénario>exportation défaut {Nom: 'application',
  Les données(){
    retourner {chiffre:dix
    }
  }
}</scénario><style>#application{
  famille de polices: 'Avenir'Helvetica, Arial, sans empattement;
  -webkit-police-lissage:anticrénelé;
  -moz-osx-police-lissage:niveaux de gris;
  aligner le texte:centre;
  Couleur: #2c3e50;
  marge supérieure: 60pixels;
}</style>

La directive v-else, comme vous pouvez le voir, ne prend aucune condition. Il est également important de noter que, chaque fois que vous utilisez la directive v-else, assurez-vous qu'elle vient directement après l'élément v-if – cela ne fonctionnera pas si elle n'est pas configurée de cette façon.

Regroupement

Vous vous demandez peut-être si vous pouvez afficher plusieurs éléments à l'aide de ces directives conditionnelles – oui, vous le pouvez. Vue nous permet d'utiliser l'élément template pour y parvenir facilement. Vous pouvez également le faire en regroupant vos éléments dans une balise div, mais cela affecterait la structure de votre application dans le DOM lorsque vous considérez le style.

<modèle v-else-if="(chiffre%2)==0">
    <h2>Le chiffre dans votre base de données est un nombre pair</h2>
    <h4>Les nombres pairs sont des nombres divisibles par 2 sans restes</h4></modèle>

À l'aide de modèles, vous pouvez placer plusieurs éléments HTML dans un bloc de directives conditionnelles.

Directive V-Else-If

Vue vous permet de tester plus d'une chose en même temps, donc pour nous, nous pouvons tester si un nombre est égal à zéro ou pair ou impair en ayant beaucoup plus d'instructions if. C'est ce qu'on appelle une directive v-else-if.

<modèle>
  <div identifiant="application">
    <image autre="Vue logo" src="./assets/logo.png">
    <h1>Bienvenue dans votre application Vue</h1>
    <h2 v-si="chiffre === 0">Le chiffre dans votre base de données est zéro</h2>
    <modèle v-else-if="(chiffre%2)==0"><h2>Le chiffre dans votre base de données est un nombre pair</h2><h4>Les nombres pairs sont des nombres divisibles par 2 sans restes</h4>
    </modèle>
    <modèle v-else-if="chiffre>0"><h2>Le chiffre dans votre base de données est un nombre impair</h2><h4>Les nombres impairs sont des nombres non divisibles par 2</h4>
    </modèle>
    <h2 v-autre>Le chiffre dans votre base de données n'est pas un nombre</h2>
  </div></modèle><scénario>exportation défaut {Nom: 'application',
  Les données(){
    retourner {chiffre:11
    }
  }
}</scénario>

Maintenant que nous avons ajouté des tests pour les nombres pairs et impairs, nos tests ont une couverture plus large. Nous pouvons tester zéro, impair, pair, et nous pouvons même tester des chiffres qui ne sont pas des nombres.

Emballer

Nous avons jeté un coup d'œil rapide au rendu conditionnel et à certaines des directives que Vue nous fournit pour y parvenir facilement. Nous avons examiné à quel point ils sont importants et comment ils ne nous obligent pas à apprendre un nouveau concept, mais à nous appuyer sur ce que nous savons déjà. Nous avons également regardé comment ils sont utilisés avec des illustrations. Bon piratage !