单路分支 v-if 指令用于'条件性地'渲染一块内容
<h1 v-if="isShow">这是一个罪恶的h1</h1>
let vm = new Vue({
el:'#app',
data:{
isShow:true
}
这是 isShow 为true,h1 的内容会被渲染出来,如果为false 则不会显示
双路分支渲染---- v-if v-else ,v-else 元素必须"紧跟"在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别
<div>
<p v-if="age<18">我是未成年人</p>
<p v-else>我是成年人</p>
</div>
let vm = new Vue({
el:'#app',
data:{
age:4,
}
多路分支渲染---- v-if v-else-if v-else-if v-else
<div>
你的分数:
<p v-if="sum>=100">完美</p>
<p v-else-if="sum>=90 && sum<100">优秀</p>
<p v-else-if="sum>=80 && sum<90">良好</p>
<p v-else-if="sum<80 && sum>60">合格</p>
<p v-else="sum<60">不合格</p>
</div>
let vm = new Vue({
el:'#app',
data:{
sum:50
}