1. v-show

不管初始的條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單的基于 CSS display: none 或者 display: block 的屬性進(jìn)行切換。

2. v-if

會(huì)根據(jù)初始的條件（data里自己的定義的數(shù)據(jù)）來進(jìn)行真正的渲染（組件真正的銷毀和重建），如果條件為真，才會(huì)開始渲染條件塊，如果條件為假，則不會(huì)渲染條件塊。

注意： v-if不要和v-for一起使用！

當(dāng)和 v-for 一起使用時(shí)，v-for 的優(yōu)先級(jí)比 v-if 更高，詳見 vue官網(wǎng)關(guān)于 v-for 的詳細(xì)描述 ，為什么不能一起使用，以下我用代碼來解釋一下。

<ul>
 <li
 v-for = "(item, index) in list"
 v-if = "isActive"
 :key = "item.id"
 >
 {{ item.name }}
 </li>
</ul>

以上代碼將會(huì)經(jīng)過如下運(yùn)算

this.list.map( user=> {
 if (isActive) {
 return user.name
 }
})

因此，哪怕我們只渲染一小部分元素，也得在每次重新渲染的時(shí)候遍歷整個(gè)列表，不論 isActive 是否發(fā)生了變化。如果 list 的數(shù)據(jù)有很多，就會(huì)造成性能低，頁(yè)面可能卡頓的現(xiàn)象出現(xiàn)。

總結(jié)

共同點(diǎn)：

v-if和v-show都是通過判斷綁定數(shù)據(jù)的true\false來展示的

不同點(diǎn)：

v-if只有在判斷為true的時(shí)候才會(huì)對(duì)數(shù)據(jù)進(jìn)行渲染，false的時(shí)候把包含的代碼進(jìn)行刪除。除非再次進(jìn)行數(shù)據(jù)渲染，v-if才會(huì)重新判斷?？梢哉f是用法比較傾向于對(duì)數(shù)據(jù)一次操作。
v-show是無論判斷是什么都會(huì)先對(duì)數(shù)據(jù)進(jìn)行渲染，只是false的時(shí)候?qū)?jié)點(diǎn)進(jìn)行display:none;的操作。所以再不重新渲染數(shù)據(jù)的情況下，改變數(shù)據(jù)的值可以使數(shù)據(jù)展示或隱藏。

用法推薦：

v-if更適合于帶有權(quán)限的操作，渲染時(shí)判斷權(quán)限數(shù)據(jù)，有則展示該功能，沒有則刪除。
v-show更適合于日常使用，可以減少數(shù)據(jù)的渲染，減少不必要的操作。
綜上，v-if 有更高的切換消耗，而 v-show 有更高的初始渲染消耗。
因此，如果需要頻繁切換 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變，更傾向功能權(quán)限性的話 v-if 較好。

以上就是如何區(qū)分vue中的v-show 與 v-if 的詳細(xì)內(nèi)容，更多關(guān)于v-show 與 v-if 的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論