6.1—条件渲染（v-if）

注意：v-if 如果为false时，在html中的关于他的DOM元素会彻底消失

<div id="app">
    <p v-if="flag">{{msg}}</p>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:123132131,
            flag:true
        }
    })
</script>

  

 

v-if、v-else-if和v-else：

<div id="app">
<!--在html中可以使用<template>标签来进行条件渲染，
因为<template>为不可见的包裹元素标签，所以最终在页面的渲染下的结果中不会显示出此标签-->
    <template v-if="num>5">
        <h1>大于5才显示{{num}}</h1>
        <p>大于5才显示{{num}}</p>
        <p>大于5才显示{{num}}</p>
    </template>
    <template v-else-if="num<5">
<!-- v-else-if 和js中的：if(..){xxx}else if(..){xxx}相同,可以连续使用-->
        <h1>小于5才显示{{num}}</h1>
        <p>小于5才显示{{num}}</p>
        <p>小于5才显示{{num}}</p>
    </template>
    <template v-else>
        <h1>等于5才显示{{num}}</h1>
        <p>等于5才显示{{num}}</p>
        <p>等于5才显示{{num}}</p>
    </template>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data: {
            num:5
        }
    })
</script>

注意：v-else和v-else-if必须紧跟v-if其后，否则不会被识别