学习笔记(02):Vue2.x从入门到实战-v-if v-else v-show 指令

立即学习:https://edu.csdn.net/course/play/6823/135314?utm_source=blogtoedu

二、v-if&v-else&v-show

v-if和v-else和if else的性质是一样的

v-if是判断是否加载HTML中的DOM，可以减轻服务器压力，在判断正确时才被加载

<h1>v-if&v-else&v-show</h1>
<hr>
<div id="app">
    <div v-if="Login">您好，pop</div> //判断是否加载
    <div v-else-if="Pass">请您登录</div> //相当于if-else-if-else双层判断
    <div v-else>{{msg}}</div>
</div>
<script>
    var demo=new Vue({
        el:'#app',
        data:{
            Login:false,
            Pass:false,
            msg:'hello'
        }
    })
</script>

v-show和v-if一样也是需要判断才会加载内容，但不同的是v-show是调整CSS Display属性：

若v-show为真,display=block

若v-show为假，display=none,内容就隐藏掉了。

div id="app">
    <div v-show="disp">{{message}}</div> //v-show调整Css diplay属性
</div>
<script>
    var demo=new Vue({
        el:'#app',
        data:{
            disp:true,
            message:'V-show'
        }
    })
</script>

内容少还是比较简单。