🧤 🦑 🛣️ Vue.js pour les débutants, leçon 3: rendu conditionnel 💂🏼 ⁉️ 🍦

Nous continuons notre formation sur Vue, qui a été recommandée par Natalia Teplukhina, ingénieur du personnel chez Gitlab et membre de l'équipe de base du framework Vue (une session de questions / réponses avec Natasha a eu lieu sur notre instagram , et vous pouvez lire la transcription ici ).

Dans la troisième leçon, nous parlerons du rendu conditionnel. Comment afficher quelque chose sur la page uniquement si certaines conditions sont remplies.

→ Vue.js débutants leçon 1: instance Vue

→ Vue.js pour les débutants, leçon 2: attributs de liaison

→ Vue.js débutants leçon 3: rendu conditionnel

→ Vue.js débutants leçon 4: rendu des listes

→ Vue .js pour les débutants leçon 5: traitement des événements

→ Vue.js pour débutants leçon 6: liaison de classes et de styles

→ Vue.js pour débutants leçon 7: propriétés calculées

→ Vue.js pour débutants leçon 8: composants

Le but de la leçon

Nous avons besoin d'une inscription dans la fiche produit qui informe le visiteur si le produit est en stock ou non. Si le produit est en stock, une inscription doit être affichée In Stock. Si ce n'est pas en stock - une inscription Out of Stock. La décision d'afficher une inscription particulière doit être prise en fonction des données stockées dans l'application.

Code initial

Voici le code avec lequel nous allons commencer. C'est, comme d'habitude, dans le fichier index.html, dans la balise <body>:

<div id="app">
  <div class="product">
    <div class="product-image">
      <img :src="image" />
    </div>

    <div class="product-info">
      <h1>{{ product }}</h1>
    </div>
  </div>
</div>

Dans le fichier main.js, lors de la configuration d'une instance Vue, l'objet de données suivant sera utilisé:

data: {
    product: "Socks",
    image: "./assets/vmSocks-green.jpg",
    inStock: true
}

Notez qu'une datanouvelle propriété a été ajoutée à l'objet . Il s'agit d'une propriété inStockqui contient une valeur booléenne true.

Tâche

Lors du développement d'applications Web, il est souvent nécessaire qu'un élément soit affiché sur une page en fonction de la satisfaction d'une certaine condition. Par exemple, si l'inventaire d'un article est terminé, vous devez en informer dans la fiche article.

Les messages correspondants sont prévus pour être émis en tant qu'éléments . Cela signifie que quelque part, il y index.htmlaura les éléments suivants:

<p>In Stock</p>
<p>Out of Stock</p>

Notre tâche est de retirer l'un d'entre eux dans le cas où les marchandises sont en stock, et l'autre dans une situation où les marchandises ne sont pas en stock.

La solution du problème

Dans Vue, la solution à ce problème semble simple et directe.

Comme vous le savez déjà, les données indiquant la présence ou l'absence de marchandises en stock sont décrites dans main.js, dans l'objet data:

inStock: true

Afin de dire au système quel élément rendre, nous pouvons utiliser les directives v-ifet v-else. Cela signifie que les éléments index.htmlsuivants tomberont dans :

<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>

Si inStockcontient une valeur vraie, le premier élément est imprimé . Sinon, le deuxième élément sera affiché. Dans notre cas inStock, la valeur est écrite true, elle sera donc affichée In Stock.

Nous avons des stocks en stock.

Super! Nous venons d'utiliser le rendu conditionnel pour afficher les détails du produit. Nous avons résolu le problème. Mais ne nous arrêtons pas là et continuons notre exploration du rendu conditionnel.

Directive V-else-if

Notre mécanisme de rendu conditionnel basé sur les directives v-ifet v-elsepeut être étendu en ajoutant un autre niveau de logique. Cela peut être fait en utilisant la directive v-else-if. Afin de le démontrer, compliquons un peu notre exemple.

Supposons que l'objet data, dans main.js, possède des informations sur la quantité de marchandises. Ils sont stockés dans la propriété inventory:

inventory: 100

En analysant cette propriété à l'aide d'expressions JavaScript entre guillemets, nous pouvons fournir des informations produit plus précises aux visiteurs de la page:

<p v-if="inventory > 10">In stock</p>
<p v-else-if="inventory <= 10 && inventory > 0">Almost sold out!</p>
<p v-else>Out of stock</p>

Dans cette situation, le premier élément sera affiché sur la page , car l'expression correspondante s'avère être vraie.

Directive V-show

Si un certain élément de la page doit être masqué et affiché fréquemment, cela signifie que pour implémenter ce mécanisme, il est logique de regarder la directive v-show. Un élément avec une telle directive sera toujours présent dans le DOM, mais il ne sera visible que si la condition passée à la directive s'avère vraie. En fait, nous parlons du fait que, grâce à l'utilisation de cette directive, une propriété CSS sera appliquée à l'élément, par condition display: none.

Cette méthode offre de meilleures performances que la gestion des éléments à l'aide de v-ifet v-else.

L'application de cette directive ressemble à ceci:

<p v-show="inStock">In Stock</p>

La solution à notre problème, dans laquelle les directives v-ifet ont été utilisées v-else, nous convient. Par conséquent, nous allons nous concentrer dessus et ne changerons rien.

Atelier

Ajoutez une propriété à l'objet de données onSale. Il doit être utilisé pour contrôler le rendu d'un élément qui affiche du texte On Saleet informe les visiteurs de la vente.

Voici un modèle que vous pouvez utiliser pour résoudre ce problème.

Voici la solution au problème.

Résultat

Aujourd'hui, vous avez appris le rendu conditionnel à l'aide de Vue. À savoir, il s'agissait de ce qui suit:

Il existe des directives Vue qui vous permettent de restituer des éléments de manière conditionnelle:
- v-si
- v-else-if
- v-else
- v-show
Lorsque vous travaillez avec des directives, vous pouvez utiliser des expressions JavaScript qui leur sont transmises entre guillemets.
Si l'expression passée à la directive entre guillemets est vraie, l'élément est généré.
La directive v-showaffecte uniquement la visibilité d'un élément, elle n'insère pas d'éléments dans le DOM et ne supprime pas les éléments du DOM.

Avez-vous un problème que vous, après avoir commencé votre connaissance avec Vue, envisagez déjà de résoudre à l'aide de ce framework?

→ Vue.js débutants leçon 1: instance Vue

→ Vue.js pour les débutants, leçon 2: attributs de liaison

→ Vue.js débutants leçon 3: rendu conditionnel

→ Vue.js débutants leçon 4: rendu des listes

→ Vue .js pour les débutants leçon 5: traitement des événements

→ Vue.js pour débutants leçon 6: lier les classes et les styles

→ Vue.js pour débutants leçon 7: propriétés calculées

→ Vue.js pour débutants leçon 8: composants

Vue.js pour les débutants, leçon 3: rendu conditionnel