VueJS - Rendern

In diesem Kapitel lernen wir das bedingte Rendern und das Rendern von Listen kennen. Beim bedingten Rendern werden wir die Verwendung von if, if-else, if-else-if, show usw. diskutieren. Beim Rendern von Listen werden wir die Verwendung der for-Schleife diskutieren.

Bedingtes Rendern

Beginnen wir und arbeiten zunächst an einem Beispiel, um die Details für das bedingte Rendern zu erläutern. Beim bedingten Rendern möchten wir nur dann ausgeben, wenn die Bedingung erfüllt ist und die bedingte Prüfung mit Hilfe von if, if-else, if-else-if, show usw. durchgeführt wird.

v-wenn

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

Im obigen Beispiel haben wir eine Schaltfläche und zwei h1-Tags mit der Nachricht erstellt.

Eine Variable namens show wird deklariert und auf den Wert true initialisiert. Es wird in der Nähe der Schaltfläche angezeigt. Auf Knopfdruck rufen wir eine Methode aufshowdata, wodurch der Wert der Variablen show umgeschaltet wird. Dies bedeutet, dass sich beim Klicken auf die Schaltfläche der Wert der Variablen show von true zu false und von false zu true ändert.

Wir haben if dem h1-Tag zugewiesen, wie im folgenden Codeausschnitt gezeigt.

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

Jetzt wird der Wert der Variablen show überprüft, und wenn dies der Fall ist, wird das h1-Tag angezeigt. Klicken Sie auf die Schaltfläche und zeigen Sie sie im Browser an. Da sich der Wert der show-Variablen in false ändert, wird das h1-Tag nicht im Browser angezeigt. Es wird nur angezeigt, wenn die show-Variable true ist.

Es folgt die Anzeige im Browser.

Wenn wir im Browser einchecken, erhalten wir dies, wenn show falsch ist.

Das h1-Tag wird aus dem DOM entfernt, wenn die Variable show auf false gesetzt ist.

Dies sehen wir, wenn die Variable wahr ist. Das h1-Tag wird wieder zum DOM hinzugefügt, wenn die Variable show auf true gesetzt ist.

v-else

Im folgenden Beispiel haben wir dem zweiten h1-Tag v-else hinzugefügt.

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 wird mit dem folgenden Codefragment hinzugefügt.

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

Nun, wenn Show wahr ist “This is h1 tag” wird angezeigt, und wenn falsch “This is h2 tag”wird Angezeigt werden. Dies erhalten wir im Browser.

Die obige Anzeige ist, wenn die Showvariable wahr ist. Da wir v-else hinzugefügt haben, ist die zweite Anweisung nicht vorhanden. Wenn wir nun auf die Schaltfläche klicken, wird die show-Variable falsch und die zweite Anweisung wird angezeigt, wie im folgenden Screenshot gezeigt.

V-Show

v-show verhält sich genauso wie v-if. Außerdem werden die Elemente basierend auf der ihr zugewiesenen Bedingung ein- und ausgeblendet. Der Unterschied zwischen v-if und v-show besteht darin, dass v-if das HTML-Element aus dem DOM entfernt, wenn die Bedingung falsch ist, und es wieder hinzufügt, wenn die Bedingung wahr ist. Während v-show das Element verbirgt, wenn die Bedingung mit Anzeige falsch ist: keine. Es zeigt das Element zurück, wenn die Bedingung erfüllt ist. Somit ist das Element immer im Dom vorhanden.

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 wird dem HTML-Element mithilfe des folgenden Codeausschnitts zugewiesen.

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

Wir haben dieselbe Variable show verwendet und basierend auf true / false wird das Bild im Browser angezeigt.

Da die Variable show true ist, entspricht das Bild dem obigen Screenshot. Lassen Sie uns auf die Schaltfläche klicken und die Anzeige sehen.

Die Variable show ist false, daher ist das Bild ausgeblendet. Wenn wir das Element untersuchen und sehen, ist das div zusammen mit dem Bild immer noch Teil des DOM mit der Anzeige der Stileigenschaften: keine, wie im obigen Screenshot gezeigt.

Listen-Rendering

v-für

Lassen Sie uns nun das Rendern von Listen mit der v-for-Direktive diskutieren.

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>

Eine Variable namens items wird als Array deklariert. In Methoden gibt es eine Methode namensshowinputvalue, das dem Eingabefeld zugeordnet ist, das die Namen der Früchte enthält. Bei der Methode werden die in das Textfeld eingegebenen Früchte mithilfe des folgenden Codes zum Array hinzugefügt.

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

Wir haben v-for verwendet, um die Früchte anzuzeigen, die wie im folgenden Code eingegeben wurden. V-for hilft dabei, die im Array vorhandenen Werte zu durchlaufen.

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

Um das Array mit der for-Schleife zu durchlaufen, müssen wir v-for = "a in items" verwenden, wobei a die Werte im Array enthält und angezeigt wird, bis alle Elemente fertig sind.

Output

Es folgt die Ausgabe im Browser.

Bei der Überprüfung der Elemente wird dies im Browser angezeigt. Im DOM sehen wir keine v-for-Direktive für das li-Element. Es zeigt das DOM ohne VueJS-Anweisungen an.

Wenn wir den Index des Arrays anzeigen möchten, wird der folgende Code verwendet.

<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>

Um den Index zu erhalten, haben wir eine weitere Variable in die Klammer eingefügt, wie im folgenden Code gezeigt.

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

In (a, Index), a ist der Wert und indexist der Schlüssel. Die Browseranzeige sieht nun wie im folgenden Screenshot gezeigt aus. So können mit Hilfe des Index beliebige Werte angezeigt werden.