v-if 条件指令

单路分支 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
            }