1、v-if 指令可以完全根據表達式的值在Dom中生成或移除一個元素。 例如： <div id ="example"> <p v-if="greeting">Hello!</p> </div> <script> new Vue({ el:"#example", data:{ greeting:fal ...
1、v-if 指令可以完全根據表達式的值在Dom中生成或移除一個元素。
例如：
<div id ="example">
<p v-if="greeting">Hello!</p>
</div>
<script>
new Vue({
el:"#example",
data:{
greeting:false;
}
});
</script>
2、v-show指令是根據表達式的值來顯示或者隱藏HTML元素。
例如：
<div id ="example">
<p v-show="greeting">Hello!</p>
</div>
<script>
new Vue({
el:"#example",
data:{
greeting:false;
}
});
</script>
3、v-if 和 v-show 的區別：
- v-if 支持<template> , v-show 不支持。
- v-if 是真是的條件渲染，會對元素進行銷毀和重建，而 v-show只是基於css的切換（display:none）。
- v-if 是惰性的，如果第一次渲染為false，什麼也不做，在條件第一次變為true的時候才會局部編譯。因為v-if 是局部編譯的過程（會被緩存），而v-show不是。
- v-if 切換的時候消耗多，v-show第一次渲染的時候消耗多。
