分支循环
在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>