Vue-06.条件渲染指令

v-if是vue条件渲染指令,有两个作用

（1）可以创建和删除HTML元素，v-if='true'是显示该元素

当data中 flag = true 时

如：<div v-if = 'flag'>这是v-if指令</div>

显示：这是v-if指令

当我们改变flag的值为false时，整个HTML会被删除，重新改为true时，会创建元素

其实它的效果和v-show差不多，v-show是显示隐藏

当data中 flag = true 时

如：<div v-if = 'flag'>这是v-if指令</div>

显示：这是v-if指令

当我们改变flag的值为false时，整个HTML会被隐藏起来。重新改为true时，会显示出来，其效果是display:block

(2)v-if是条件渲染指令

符合条件的元素会显示出来，不符合的元素会被隐藏

<div v-if='type=='A''>优秀</div>

可以配合v-else-if,v-else一起使用

data:{
    flag:true,
    type:'A'
}

<div v-if="type=='A'">优秀</div>
<div v-else-if="type=='B'">良好</div>
<div v-else-if="type=='C'">一般</div>
<div v-else>差</div>

此时会显示优秀