分支迴圈
在Vue中，分支迴圈也是使用標籤屬性指令完成的，這一點與後端模板語法不太相同。
v-for
下面是通過v-for進行迴圈，不光可以拿到元素本身，也可以拿到索引值。
如果資料是物件型別，則可以使用(key,value,index)進行取值。
需要注意的是，當不指定key/value而只指定一個迭代變數，那麼該迭代變數取值會取value
<body>
<main id="id-1">
<ul>
<li v-for="(ele,index) in array">{{ele}}-{{index}}</li>
</ul>
</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
"use strict";
const v1 = new Vue({
el: "#id-1",
data: {
array:["第一個元素","第二個元素","第三個元素"],
}
})
</script>
v-if
v-if，當if後的條件為true時則渲染出該標籤以及該標籤內的子標籤。為false時則不渲染。
<body>
<main id="id-1">
<p v-if="conditionOne">渲染我</p>
<p v-if="conditionTwo">不渲染我</p>
</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
"use strict";
const v1 = new Vue({
el: "#id-1",
data: {
conditionOne:true,
conditionTwo:false,
},
})
</script>
v-else
該指令應當和v-if連用，效果與v-if相反。
這兩組指令一個代表如果渲染，一個代表否則渲染。
<body>
<main id="id-1">
<p v-if="conditionOne">條件為真渲染我</p>
<p v-else>否則渲染我</p>
</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
"use strict";
const v1 = new Vue({
el: "#id-1",
data: {
conditionOne:false,
},
})
</script>
v-else-if
額外的判斷條件，當有v-if/v-else/v-else-if在時，只會執行其中的一條。
<body>
<main id="id-1">
<p v-if="grades > 90">成績優秀</p>
<p v-else-if="grades > 60">成績及格</p>
<p v-else-if="grades > 40">成績一般</p>
<p v-else>成績較差</p>
</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
"use strict";
const v1 = new Vue({
el: "#id-1",
data: {
grades:80,
},
})
</script>
分支邏輯
在v-if/v-else/v-else-if中，可以使用邏輯判斷與或非。
| 符號 | 描述 |
|---|---|
| && | 與（優先順序3），一真一假取一假 |
| || | 或（優先順序2），一真一假取一真 |
| ! | 非（優先順序1），兩個為真才取真 |
<body>
<main id="id-1">
<p v-if="conditionOne && conditionTwo">兩個為真，渲染</p>
</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
"use strict";
const v1 = new Vue({
el: "#id-1",
data: {
conditionOne:true,
conditionTwo:true,
},
})
</script>