Vue入門系列（三）之Vue列表渲染及條件渲染實戰

本文轉載自查看原文 2017-11-08 16:30 1636 Vue入門系列（三）之Vue列表渲染及條件渲染實戰

Vue官網：

https://cn.vuejs.org/v2/guide/forms.html#基礎用法

【入門系列】

(一) http://www.cnblogs.com/gdsblog/p/7804785.html

(二) http://www.cnblogs.com/gdsblog/p/7804770.html

(三) http://www.cnblogs.com/gdsblog/p/7804758.html

（四） http://www.cnblogs.com/gdsblog/p/7804758.html

（五） http://www.cnblogs.com/gdsblog/p/7804686.html

【本文轉自】

　　http://www.cnblogs.com/fly_dragon

3.1. 條件渲染

有時候我們要根據數據的情況，決定標簽是否進行顯示或者有其他動作。最常見的就是，表格渲染的時候，如果表格沒有數據，就顯示無數據。如果有數據就顯示表格數據。 Vue幫我們提供了一個v-if的指令，幫助我們完成判斷的模板處理。
<div id="app">
  <h1 v-if="ok">Yes</h1>
  <h1 v-else>No</h1>  
</div>


<script>
  var app = new Vue({         
    el: '#app',               
    data: {    
      ok: true      // true,返回：Yes，   false=> No               
    }
  });
</script>
v-if指令可以根據數據綁定的情況進行插入標簽或者移除標簽。當然，如果熟悉js的都清楚，有if，肯定會有else。 Vue提供的是 v-else指令。

3.2. 列表渲染

3.2.1. 基本v-for循環渲染標簽

模板引擎都會提供循環的支持。Vue也不例外，Vue是提供了一個v-for指令。基本的用法類似於foreach的用法。還是看例子最直接，上代碼：
<div id="app">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年齡</th>
        <th>地址</th>
      </tr>
    </thead>
    <tbody> 
      
      <tr v-for="item in UserList" >
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.address }}</td>
      </tr>
    </tbody>
  </table>
</div>
<script>
  var app = new Vue({         
    el: '#app',               
    data: {                   
     UserList: [
      {'name': 'malun', 'age': 18, 'address': '北京黑地下室'},
      {'name': 'flydragon', 'age': 22, 'address': '廈門的很多熱的地方'},
      {'name': 'temp', 'age': 25, 'address': '東北松花江上'}
     ]
    }
  });
</script>
3.2.2. Template循環渲染多標簽

上面的例子，我們演示的是每次循環輸出一個tr標簽。如果我們希望每次循環生成兩個tr標簽呢？如果還有生成其他的標簽呢？

Vue給我們提供了template標簽，供我們用於v-for循環中進行處理。

上代碼嘍：
<ul>
  
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>
3.2.3. 關於v-for對應的數組的更新

由於Vue的機制就是檢測數據的變化，自動跟新HTML。數組的變化，Vue之檢測部分函數，檢測的函數執行時才會觸發視圖更新。這些方法如下：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

3.3. 表格顯示的綜合案例

下面是一個綜合的案例，每秒鍾往表格中添加一條數據。本案例綜合使用了v-if 和 v-for循環綜合案例。
<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入門之動態顯示表格</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年齡</th>
          <th>地址</th>
        </tr>
      </thead>
      
      <tbody v-if="UserList.length > 0"> 
        <tr v-for="item in UserList" >
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.address }}</td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr><td colspan="3">沒有數據奧！</td></tr>
      </tbody>
    </table>
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
       UserList: []
      }
    });

    // 每秒鍾插入一條數據。
    setInterval(function () {
      app.UserList.push({'name': 'malun', 'age': 18, 'address': '北京黑地下室'});
    }, 1000);
  </script>
</body>
</html>
3.4. 總結列表和條件綁定

列表的使用其實本質還是js的衍生使用，對於有js開發基礎的沒有什么難度。關鍵是多寫幾個案例就會詳細通了。

Github地址：源碼下載
其他詳情請參考：http://aicoder.com/vue/preview/all.html
作者：FlyDragon

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 03-Vue入門系列之Vue列表渲染及條件渲染實戰 Vue 列表渲染及條件渲染實戰 Vue——條件渲染&列表渲染 Vue - 條件渲染與列表渲染 Vue 基礎自查——條件渲染和列表渲染 vue3 條件和列表渲染 02 . Vue入門基礎之條件渲染,列表渲染,事件處理器,表單控件綁定 vue數據渲染、條件判斷及列表循環 (六)Vue的列表渲染及組件渲染 vue入門：（v-for指令與列表渲染）