v-if條件渲染
- 將元素 渲染（顯示、消失）和一個(gè)變量的值綁定蔽莱，值為true顯示，否則消失
v-else條件渲染
- 注意：v-if條件取反（一定是v-if下一個(gè)兄弟）
v-if 和 v-show區(qū)別
- 元素 隱藏 v-show 元素 display:none v-if直接移除元素
- 初始值為false時(shí)， v-if是惰性的 初始元素是 不加載
-
使用場景:
- v-show適用于 頻繁顯示、隱藏 場景
- v-if適用于 不頻繁顯示泄朴、隱藏，且內(nèi)部結(jié)構(gòu)比較復(fù)雜（惰性露氮，可以提高首次打開速度）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:200px;
height:200px;
background: rgb(134, 97, 97);
}
.box2{
width:200px;
height:200px;
background: rgb(14, 167, 103);
}
.box3{
width:200px;
height:200px;
background: rgb(79, 88, 216);
}
</style>
</head>
<body>
<div id="app">
<button @click="isShow = !isShow">顯示/隱藏</button>
<div class="box" v-if="isShow">if</div>
<p class="box2" v-else>else</p>
<div class="box3" v-show="isShow">show</div>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
isShow:false
}
})
</script>
</body>
</html>
