VueJS - Rendu

Dans ce chapitre, nous découvrirons le rendu conditionnel et le rendu de liste. Dans le rendu conditionnel, nous discuterons de l'utilisation de if, if-else, if-else-if, show, etc. Dans le rendu de liste, nous discuterons de l'utilisation de la boucle for.

Rendu conditionnel

Commençons et travaillons d'abord sur un exemple pour expliquer les détails du rendu conditionnel. Avec le rendu conditionnel, nous voulons sortir uniquement lorsque la condition est remplie et que la vérification conditionnelle est effectuée à l'aide de if, if-else, if-else-if, show, etc.

v-si

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2>This is h2 tag</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

Output

Dans l'exemple ci-dessus, nous avons créé un bouton et deux balises h1 avec le message.

Une variable appelée show est déclarée et initialisée à une valeur true. Il est affiché à proximité du bouton. En cliquant sur le bouton, nous appelons une méthodeshowdata, qui bascule la valeur de la variable show. Cela signifie qu'en cliquant sur le bouton, la valeur de la variable show passera de vrai à faux et faux à vrai.

Nous avons attribué if à la balise h1 comme indiqué dans l'extrait de code suivant.

<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<h1 v-if = "show">This is h1 tag</h1>

Maintenant, ce qu'il va faire, c'est vérifier la valeur de la variable show et si c'est vrai, la balise h1 sera affichée. Cliquez sur le bouton et affichez dans le navigateur, car la valeur de la variable show passe à false, la balise h1 n'est pas affichée dans le navigateur. Il n'est affiché que lorsque la variable show est vraie.

Voici l'affichage dans le navigateur.

Si nous vérifions dans le navigateur, c'est ce que nous obtenons lorsque show est faux.

La balise h1 est supprimée du DOM lorsque la variable show est définie sur false.

C'est ce que nous voyons lorsque la variable est vraie. La balise h1 est ajoutée au DOM lorsque la variable show est définie sur true.

v-else

Dans l'exemple suivant, nous avons ajouté v-else à la deuxième balise h1.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2 v-else>This is h2 tag</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

v-else est ajouté à l'aide de l'extrait de code suivant.

<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>

Maintenant, si le spectacle est vrai “This is h1 tag” sera affiché, et si faux “This is h2 tag”sera affiché. C'est ce que nous obtiendrons dans le navigateur.

L'affichage ci-dessus est lorsque la variable show est vraie. Depuis, nous avons ajouté v-else, la deuxième instruction n'est pas présente. Maintenant, lorsque nous cliquons sur le bouton, la variable show deviendra fausse et la deuxième instruction sera affichée comme indiqué dans la capture d'écran suivante.

v-show

v-show se comporte de la même manière que v-if. Il affiche et masque également les éléments en fonction de la condition qui lui est assignée. La différence entre v-if et v-show est que v-if supprime l'élément HTML du DOM si la condition est fausse et le rajoute si la condition est vraie. Alors que v-show masque l'élément, si la condition est fausse avec display: none. Il montre l'élément en arrière, si la condition est vraie. Ainsi, l'élément est toujours présent dans le dom.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2 v-else>This is h2 tag</h2>
         <div v-show = "show">
            <b>V-Show:</b>
            <img src = "images/img.jpg" width = "100" height = "100" />
         </div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

v-show est attribué à l'élément HTML à l'aide de l'extrait de code suivant.

<div v-show = "show"><b>V-Show:</b><img src = "images/img.jpg" width = "100" height = "100" /></div>

Nous avons utilisé la même variable show et en fonction du fait qu'elle est vraie / fausse, l'image est affichée dans le navigateur.

Maintenant, puisque la variable show est vraie, l'image est comme affichée dans la capture d'écran ci-dessus. Cliquons sur le bouton et voyons l'affichage.

La variable show est fausse, donc l'image est masquée. Si nous inspectons et voyons l'élément, le div avec l'image fait toujours partie du DOM avec l'affichage de la propriété de style: aucun comme on le voit dans la capture d'écran ci-dessus.

Rendu de liste

v-pour

Parlons maintenant du rendu de liste avec la directive v-for.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue"
            v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
         <h1 v-if = "items.length>0">Display Fruits Name</h1>
         <ul>
            <li v-for = "a in items">{{a}}</li>
         </ul>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               items:[],
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.items.push(event.target.value);
               }
            },
         });
      </script>
   </body>
</html>

Une variable appelée items est déclarée sous forme de tableau. Dans les méthodes, il existe une méthode appeléeshowinputvalue, qui est affecté à la zone de saisie qui prend les noms des fruits. Dans la méthode, les fruits saisis dans la zone de texte sont ajoutés au tableau à l'aide du morceau de code suivant.

showinputvalue : function(event) {
   this.items.push(event.target.value);
}

Nous avons utilisé v-for pour afficher les fruits saisis comme dans le morceau de code suivant. V-for aide à parcourir les valeurs présentes dans le tableau.

<ul>
   <li v-for = "a in items">{{a}}</li>
</ul>

Pour parcourir le tableau avec la boucle for, nous devons utiliser v-for = "a in items" où a contient les valeurs du tableau et s'affichera jusqu'à ce que tous les éléments soient terminés.

Output

Voici la sortie dans le navigateur.

En inspectant les éléments, voici ce qu'il montre dans le navigateur. Dans le DOM, nous ne voyons aucune directive v-for pour l'élément li. Il affiche le DOM sans aucune directive VueJS.

Si nous souhaitons afficher l'index du tableau, cela se fait à l'aide du code suivant.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue"
            v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
         <h1 v-if = "items.length>0">Display Fruits Name</h1>
         <ul>
            <li v-for = "(a, index) in items">{{index}}--{{a}}</li>
         </ul>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               items:[],
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.items.push(event.target.value);
               }
            },
         });
      </script>
   </body>
</html>

Pour obtenir l'index, nous avons ajouté une autre variable dans le crochet, comme indiqué dans le morceau de code suivant.

<li v-for = "(a, index) in items">{{index}}--{{a}}</li>

Dans (a, index), a est la valeur et indexC'est la clé. L'affichage du navigateur sera maintenant comme indiqué dans la capture d'écran suivante. Ainsi, à l'aide de l'index, toutes les valeurs spécifiques peuvent être affichées.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved