VueJS - renderowanie

W tym rozdziale nauczymy się renderowania warunkowego i renderowania listy. W renderowaniu warunkowym omówimy użycie if, if-else, if-else-if, show itp. W renderowaniu list omówimy użycie pętli for.

Renderowanie warunkowe

Zacznijmy i najpierw popracujmy nad przykładem, aby wyjaśnić szczegóły renderowania warunkowego. W przypadku renderowania warunkowego chcemy wyświetlać tylko wtedy, gdy warunek jest spełniony, a sprawdzenie warunkowe odbywa się za pomocą if, if-else, if-else-if, show itp.

v-if

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

W powyższym przykładzie utworzyliśmy przycisk i dwa tagi h1 z komunikatem.

Zmienna o nazwie show jest zadeklarowana i zainicjowana do wartości true. Jest wyświetlany w pobliżu przycisku. Po kliknięciu przycisku wywołujemy metodęshowdata, która przełącza wartość zmiennej show. Oznacza to, że po kliknięciu przycisku wartość zmiennej show zmieni się z true na false iz false na true.

Przypisaliśmy if do tagu h1, jak pokazano w poniższym fragmencie kodu.

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

Teraz sprawdzi wartość zmiennej show i jeśli to prawda, zostanie wyświetlony znacznik h1. Kliknij przycisk i zobacz w przeglądarce, ponieważ wartość zmiennej show zmienia się na false, znacznik h1 nie jest wyświetlany w przeglądarce. Jest wyświetlany tylko wtedy, gdy zmienna show ma wartość true.

Poniżej przedstawiono wyświetlanie w przeglądarce.

Jeśli sprawdzimy w przeglądarce, otrzymamy to, gdy show jest fałszywe.

Znacznik h1 jest usuwany z DOM, gdy zmienna show ma wartość false.

Oto, co widzimy, gdy zmienna jest prawdziwa. Znacznik h1 jest dodawany z powrotem do DOM, gdy zmienna show ma wartość true.

v-else

W poniższym przykładzie dodaliśmy v-else do drugiego znacznika 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 jest dodawane przy użyciu następującego fragmentu kodu.

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

Teraz, jeśli przedstawienie jest prawdą “This is h1 tag” zostanie wyświetlony, a jeśli false “This is h2 tag”zostanie wyświetlone. To właśnie otrzymamy w przeglądarce.

Powyższy ekran dotyczy sytuacji, gdy zmienna show ma wartość true. Ponieważ dodaliśmy v-else, druga instrukcja nie jest obecna. Teraz, gdy klikniemy przycisk, zmienna show stanie się fałszywa, a druga instrukcja zostanie wyświetlona, ​​jak pokazano na poniższym zrzucie ekranu.

v-show

v-show zachowuje się tak samo jak v-if. Pokazuje również i ukrywa elementy na podstawie przypisanego warunku. Różnica między v-if i v-show polega na tym, że v-if usuwa element HTML z DOM, jeśli warunek jest fałszywy, i dodaje go z powrotem, jeśli warunek jest prawdziwy. Natomiast v-show ukrywa element, jeśli warunek jest fałszywy z display: none. Pokazuje element z powrotem, jeśli warunek jest prawdziwy. Zatem element jest zawsze obecny w domenie.

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 jest przypisywane do elementu HTML przy użyciu następującego fragmentu kodu.

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

Użyliśmy tej samej zmiennej show i opierając się na tym, że jest ona prawda / fałsz, obraz jest wyświetlany w przeglądarce.

Teraz, ponieważ zmienna show ma wartość true, obraz jest taki, jak pokazano na powyższym zrzucie ekranu. Kliknijmy przycisk i zobaczmy wyświetlacz.

Zmienna show jest fałszywa, dlatego obraz jest ukryty. Jeśli sprawdzimy i zobaczymy element, div wraz z obrazem nadal jest częścią DOM z właściwością style display: none, jak widać na powyższym zrzucie ekranu.

Renderowanie listy

v-for

Omówmy teraz renderowanie list za pomocą dyrektywy 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>

Zmienna o nazwie items jest zadeklarowana jako tablica. W metodach istnieje metoda o nazwieshowinputvalue, które jest przypisane do pola wprowadzania, które przyjmuje nazwy owoców. W metodzie owoce wpisane w pole tekstowe są dodawane do tablicy za pomocą następującego fragmentu kodu.

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

Użyliśmy v-for do wyświetlenia owoców wpisanych jak w poniższym fragmencie kodu. V-for pomaga iterować po wartościach obecnych w tablicy.

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

Aby iterować po tablicy za pomocą pętli for, musimy użyć v-for = ”a in items”, gdzie a przechowuje wartości w tablicy i będzie wyświetlane, dopóki wszystkie elementy nie zostaną wykonane.

Output

Poniżej przedstawiono dane wyjściowe w przeglądarce.

To właśnie pokazuje przeglądarka podczas sprawdzania elementów. W DOM nie widzimy żadnej dyrektywy v-for dla elementu li. Wyświetla DOM bez żadnych dyrektyw VueJS.

Jeśli chcemy wyświetlić indeks tablicy, zrobimy to za pomocą następującego kodu.

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

Aby uzyskać indeks, dodaliśmy jeszcze jedną zmienną w nawiasie, jak pokazano w poniższym fragmencie kodu.

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

W (a, indeks), a jest wartością i indexjest kluczem. Wyświetlacz przeglądarki będzie teraz wyglądał tak, jak pokazano na poniższym zrzucie ekranu. W ten sposób za pomocą indeksu można wyświetlić dowolne określone wartości.