1. v-show

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

2. v-if

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

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

當和 v-for 一起使用時，v-for 的優先級比 v-if 更高，詳見 vue官網關于 v-for 的詳細描述 ，為什么不能一起使用，以下我用代碼來解釋一下。

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

以上代碼將會經過如下運算

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

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

總結

共同點：

v-if和v-show都是通過判斷綁定數據的truefalse來展示的

不同點：

v-if只有在判斷為true的時候才會對數據進行渲染，false的時候把包含的代碼進行刪除。除非再次進行數據渲染，v-if才會重新判斷。可以說是用法比較傾向于對數據一次操作。v-show是無論判斷是什么都會先對數據進行渲染，只是false的時候對節點進行display:none;的操作。所以再不重新渲染數據的情況下，改變數據的值可以使數據展示或隱藏。

用法推薦：

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

以上就是如何區分vue中的v-show 與 v-if 的詳細內容，更多關于v-show 與 v-if 的資料請關注好吧啦網其它相關文章！