v-if
<script src="../libs/vue.js"></script>
<div id="app">
? ? <!--v-if? 判斷是否滿足條件-->
? ? <div v-if="seen">
? ? ? ? 你可以看見我了
? ? </div>
? ? <div v-else>看不見了</div>
? ? <div v-if="type === 'A'">
? ? ? A
? ? </div>
? ? <div v-else-if="type === 'B'">
? ? ? ? B
? ? </div>
? ? <div v-else-if="type === 'C'">
? ? ? ? C
? ? </div>
? ? <div v-else>
? ? ? Not A B C
? ? </div>
</div>
<script>
? ? var vue = new Vue({
? ? ? ? el: "#app",
? ? ? ? data: {
? ? ? ? ? ? seen: true,
? ? ? ? ? ? type:'A'
? ? ? ? }
? ? })
</script>
v-show
<script src="../libs/vue.js"></script>
<div id="app">
? ? <!--v-show 根據(jù)條件展示元素-->
? ? <!--始終在dom中渲染和保留履澳，切換只是改變了css的display-->
? ? <h1 v-show="seen">hello vue</h1>
? ? <!--v-show 不支持template? 也不支持v-else-->
</div>
<script>
? ? var vue = new Vue({
? ? ? ? el: "#app",
? ? ? ? data: {
? ? ? ? ? ? seen: true,
? ? ? ? }
? ? })
</script>
比較：
v-if是“真正”的條件渲染缚陷，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建莉钙。
v-if也是惰性的：如果在初始渲染時(shí)條件為假删咱，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開始渲染條件塊豫领。
相比之下栓撞，v-show?就簡(jiǎn)單得多——不管初始條件是什么，元素總是會(huì)被渲染赊豌，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換扛或。
一般來說，v-if?有更高的切換開銷碘饼，而?v-show?有更高的初始渲染開銷熙兔。因此悲伶，如果需要非常頻繁地切換，則使用?v-show?較好住涉；如果在運(yùn)行時(shí)條件很少改變麸锉，則使用?v-if?較好。
不推薦同時(shí)使用?v-if?和?v-for舆声。
當(dāng)?v-if?與?v-for?一起使用時(shí)花沉，v-for?具有比?v-if?更高的優(yōu)先級(jí)。
