Utilisation de V-Show pour rendre des éléments dans Vue

Dans l'article d'aujourd'hui, nous examinerons une autre directive de rendu conditionnel dans Vue appelée v-show.

Rendu conditionnel dans Vue

Nous avons vu à quel point il est important de pouvoir afficher des éléments dans vos composants en fonction de conditions prédéfinies. Vue.js facilite cette tâche avec quelques directives que vous pouvez commencer à utiliser dès aujourd'hui sans aucune courbe d'apprentissage. Dans notredernier message, nous avons vu les directives v-if, v-else et v-else-ifet nous avons également examinév-for pour boucler . Aujourd'hui, nous examinerons la directive v-show comme l'une des directives utilisées dans Vue pour le rendu conditionnel.

Avant de commencer

Vous aurez besoin d'avoir ceux-ci installés :

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

Commencer

Ouvrons VS Code et créons un nouveau projet Vue en utilisant le terminal avec cette commande :

vue créer des conditions

Suivez l'invite et un nouveau projet sera créé pour vous dans le dossier de votre choix. Assurez-vous que cela fonctionne bien en utilisant la CLI pour exécuter la commande dev :

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>

Examinons maintenant la directive v-show et voyons comment cela fonctionne.

Spectacle en V

Cette directive est très similaire à la directive v-if – les éléments auxquels elle est attachée doivent s'afficher dans le DOM lorsque les conditions prédéfinies sont remplies et, si elles ne le sont pas, l'élément ne s'affichera pas.

Pour le voir en action, copiez le bloc de code ci-dessous dans le composant app.vue :

<modèle>
  <div identifiant="application">
    <image autre="Vue logo" src="./assets/logo.png">
    <h1>Bienvenue dans votre application Vue</h1>
  <div v-spectacle="type de connexion ==='nom d'utilisateur'"><étiqueter>Nom d'utilisateur</étiqueter><contribution espace réservé="Entrez votre nom d'utilisateur">
    </div></div></modèle><scénario>exportation défaut {Nom: 'application',
  Les données(){
    retourner {chiffre:5,loginType: 'nom d'utilisateur'
    }
  }
}</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, nous avons créé une variable appelée loginType, puis l'avons initialisée sur username, nous avons également mis une balise d'en-tête et y avons attaché une directive v-show.

npm exécuter servir

Différences entre V-If et V-Show

Vous vous demandez peut-être à quel point v-if est différent de v-show. Ils ne sont pas si différents, cependant, il y a quelques points à noter lors du choix de ceux à utiliser. Premièrement, avec v-show, vous ne pouvez pas avoir de superposition v-else ou v-else-if, ce qui signifie que vous ne testez qu'une seule condition en utilisant un bloc v-show.

<modèle v-spectacle="type de connexion ==='nom d'utilisateur'"><étiqueter>Nom d'utilisateur</étiqueter><contribution espace réservé="Entrez votre nom d'utilisateur"></modèle>

Une autre chose est que vous ne pouvez pas utiliser v-show pour les éléments de modèle comme le bloc de code ci-dessus. Cela signifie que vous devez utiliser des balises div si vous souhaitez afficher plusieurs éléments.

Enfin, lorsque les conditions prédéfinies ne sont pas remplies, v-if est entièrement supprimé (commenté) du DOM, tandis que pour v-show, l'élément reste dans le DOM – Vue définit uniquement sa valeur d'affichage CSS sur none. Cela devrait vous guider pour choisir celui qui correspond le mieux à votre cas d'utilisation.

Ajout de conditions supplémentaires

L'utilisation de v-show pour ajouter plus de conditions peut ressembler au 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 v-spectacle="type de connexion ==='nom d'utilisateur'"><étiqueter>Nom d'utilisateur</étiqueter><contribution espace réservé="Entrez votre nom d'utilisateur">
    </div>
    <div v-spectacle="type de connexion ==='nom d'utilisateur'"><étiqueter>E-mail</étiqueter><contribution espace réservé="Entrez votre adresse email">
    </div>
    <bouton @Cliquez sur="toggleFunction()">Basculer</bouton>
  </div></modèle><scénario>exportation défaut {Nom: 'application',
  Les données(){
    retourner {chiffre:5,loginType: 'nom d'utilisateur'
    }
  },méthodes: {
    toggleFunction(){
      si (ce.loginType== 'nom d'utilisateur') {
        ce.loginType= 'nom d'utilisateur'
      } autre
      ce.loginType= 'nom d'utilisateur'
    }
  }
}</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, nous utilisons deux directives v-show pour tester deux conditions : nous insérons un bouton et, au clic, nous créons une fonction à appeler. Cette fonction bascule la valeur de loginType. Vous pouvez voir qu'il s'affiche exactement comme nous l'attendons.

Utilisation des clés

Vue.js réutilise des choses comme la balise d'entrée que nous avons dans notre application pour rendre l'application efficace, mais parfois vous voulez en fait que les rendus soient faits à partir de zéro. Jetez un œil au bloc de code par exemple :

<modèle v-si="type de connexion ==='nom d'utilisateur'">
  <étiqueter>Nom d'utilisateur</étiqueter>
  <contribution espace réservé="Entrez votre nom d'utilisateur"></modèle><modèle v-autre>
  <étiqueter>E-mail</étiqueter>
  <contribution espace réservé="Entrez votre adresse email"></modèle>

Vous verrez que la valeur d'entrée reste dans la boîte même après qu'un événement de basculement se soit produit. Pour forcer Vue à restituer l'entrée à partir de zéro, utilisez keys.

<modèle v-si="type de connexion ==='nom d'utilisateur'">
  <étiqueter>Nom d'utilisateur</étiqueter>
  <contribution espace réservé="Entrez votre nom d'utilisateur" clé="nom d'utilisateur"></modèle><modèle v-autre>
  <étiqueter>E-mail</étiqueter>
  <contribution espace réservé="Entrez votre adresse email" clé="saisie d'e-mail"></modèle>

Conclusion

Nous avons vu comment fonctionne la directive v-show et pourquoi elle est importante pour le rendu des éléments dans des conditions prédéfinies à l'aide des directives Vue. Nous avons également vu des cas où v-show est différent de v-if et quand les utiliser avec des illustrations. J'espère que vous commencerez à utiliser v-show souvent à l'avenir. Bon piratage !