VueJS - 渲染

上一頁
下一頁

本章將學習條件渲染和列表渲染。在條件渲染中，我們將討論使用if、if-else、if-else-if、show等。在列表渲染中，我們將討論如何使用for迴圈。

條件渲染

讓我們開始，先做一個例子來解釋條件渲染的細節。在條件渲染中，我們希望只有在條件滿足時才輸出內容，並且條件檢查是透過if、if-else、if-else-if、show等來完成的。

v-if

示例

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

輸出

v-if

在上面的例子中，我們建立了一個按鈕和兩個帶有訊息的h1標籤。

聲明瞭一個名為show的變數並將其初始化為true。它顯示在按鈕附近。點選按鈕時，我們呼叫一個方法**showdata**，該方法切換變數show的值。這意味著點選按鈕後，變數show的值將從true變為false，從false變為true。

我們將if賦值給h1標籤，如下面的程式碼片段所示。

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

現在它的作用是，它將檢查變數show的值，如果為true，則顯示h1標籤。點選按鈕並在瀏覽器中檢視，當變數show的值變為false時，h1標籤不會在瀏覽器中顯示。只有當show變數為true時才顯示。

以下是瀏覽器中的顯示。

Show Tag

如果我們在瀏覽器中檢查，當show為false時，我們會得到以下結果。

Show False

當變數show設定為false時，h1標籤將從DOM中移除。

h1 Tag Removed

當變數為true時，我們會看到這個。當變數show設定為true時，h1標籤將被添加回DOM。

v-else

在下面的例子中，我們在第二個h1標籤中添加了v-else。

示例

<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 使用以下程式碼片段新增。

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

現在，如果show為true，將顯示**“這是一個h1標籤”**，如果為false，將顯示**“這是一個h2標籤”**。這就是我們在瀏覽器中看到的。

Vue-If True

上面的顯示是當show變數為true時。由於我們添加了v-else，所以第二個語句不存在。現在，當我們點選按鈕時，show變數將變為false，並將顯示第二個語句，如下面的截圖所示。

Vue-If False

v-show

v-show 的行為與 v-if 相同。它也根據分配給它的條件顯示和隱藏元素。v-if 和 v-show 之間的區別在於，如果條件為 false，v-if 會從 DOM 中移除 HTML 元素，如果條件為 true，則會將其添加回來。而 v-show 使用 display:none 隱藏元素，如果條件為 false。如果條件為 true，則顯示元素。因此，元素始終存在於 DOM 中。

示例

<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 使用以下程式碼片段分配給 HTML 元素。

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

我們使用了相同的變數 show，並根據其真假值在瀏覽器中顯示影像。

Image True

現在，由於變數 show 為 true，影像如上面的螢幕截圖所示。讓我們點選按鈕並檢視顯示。

Button

變數 show 為 false，因此影像被隱藏。如果我們檢查並檢視元素，div 和影像仍然是 DOM 的一部分，樣式屬性為 display: none，如上面的螢幕截圖所示。

列表渲染

v-for

現在讓我們討論使用 v-for 指令進行列表渲染。

示例

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

宣告一個名為 items 的變數作為陣列。在 methods 中，有一個名為 **showinputvalue** 的方法，它被分配給輸入框，該輸入框接受水果的名稱。在方法中，使用以下程式碼段將輸入文字框中的水果新增到陣列中。

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

我們使用了 v-for 來顯示輸入的水果，如下面的程式碼段所示。V-for 有助於迭代陣列中的值。

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

要使用 for 迴圈迭代陣列，我們必須使用 v-for = ”a in items”，其中 a 包含陣列中的值，並將顯示直到所有專案完成。

輸出

以下是瀏覽器中的輸出。

V-for

檢查專案時，這就是它在瀏覽器中顯示的內容。在 DOM 中，我們沒有看到任何 v-for 指令到 li 元素。它顯示沒有任何 VueJS 指令的 DOM。

V-for Directives

如果我們希望顯示陣列的索引，則可以使用以下程式碼。

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

要獲取索引，我們在括號中添加了另一個變數，如下面的程式碼段所示。

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

在 (a, index) 中，**a** 是值，**index** 是鍵。瀏覽器顯示現在將如下面的螢幕截圖所示。因此，藉助索引，可以顯示任何特定值。

Index
列印頁面
上一頁
下一頁
廣告