一、條件判斷
1、v-if
條件判斷使用 v-if 指令：
2、v-else
可以用 v-else 指令給 v-if 添加一個 "else" 塊：
//隨機生成一個數字，判斷是否大於0.5，然后輸出對應信息：
<div id="app">
<div v-if="Math.random() > 0.5"> Sorry </div>
<div v-else> Not sorry </div>
</div>
<script>
new Vue({ el: '#app' }) </script>
3、v-else-if
v-else-if 在 2.1.0 新增，顧名思義，用作 v-if 的 else-if 塊。可以鏈式的多次使用：
v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之后。
4、v-show
我們也可以使用 v-show 指令來根據條件展示元素：
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div>
<script>
new Vue({ el: '#app', data: { ok: true } }) </script>
5、v-if與v-show的區別：
在切換 v-if 塊時，Vue.js 有一個局部編譯/卸載過程，因為 v-if 之中的模板也可能包括數據綁定或子組件。
v-if 是真實的條件渲染，因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內的事件監聽器和子組件。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——在條件第一次變為真時才開始局部編譯（編譯會被緩存起來）。
相比之下，v-show 簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。
一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運行時條件不大可能改變 v-if 較好。
二、循環語句
循環使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊語法， sites 是源數據數組，並且 site 是數組元素迭代的別名。
v-for 可以綁定數據到數組來渲染一個列表：
<div id="app">
<ol>
<li v-for="site in sites"> {{ site.name }} </li>
</ol>
</div>
<script>
new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>
模板中使用 v-for：根據sites數組內容循環展示模板里的 li 標簽
<ul>
<template v-for="site in sites">
<li>{{ site.name }}</li>
<li>--------------</li>
</template>
</ul>
1、v-for 迭代對象
v-for 可以通過一個對象的屬性來迭代數據：
<li v-for="value in object"> {{ value }} </li>
也可以提供第二個的參數為鍵名：
<li v-for="(value, key) in object"> {{ key }} : {{ value }} </li>
第三個參數為索引：
<li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li>
不僅如此，在迭代屬性輸出的之前，v-for會對屬性進行升序排序輸出：
<div id="app">
<ul>
<li v-for="n in object"> {{ n }} </li>
</ul>
</div>
new Vue({ el: '#app', data: { object: { 2: '第三', 0: '第一', 1: '第二' } } }) //輸出：第一、第二、第三
2、v-for 迭代整數
v-for 也可以循環整數
<li v-for="n in 10"> {{ n }} </li>
//從1展示到10
3、v-for 循環數組
<li v-for="n in [1,3,5]"> {{ n }} </li>
//展示1/3/5