立即学习: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>
内容少还是比较简单。