3.1. 條件渲染
有時候我們要根據數據的情況，決定標簽是否進行顯示或者有其他動作。最常見的就是，表格渲染的時候，如果表格沒有數據，就顯示無數據。如果有數據就顯示表格數據。 Vue幫我們提供了一個v-if的指令，幫助我們完成判斷的模板處理。
<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
</div>
<!-- 當ok為true的時候，輸出： Yes， 否則輸出： No -->
<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>
<!-- 每次for循環，都會創建一個tr標簽。item是遍歷的元素。 -->
<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標簽，可以一次循環，輸出兩個li標簽 -->
<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
