如何區(qū)分vue中的v-show 與 v-if
1. v-show
不管初始的條件是什么，元素總是會被渲染，并且只是簡單的基于 CSS display: none 或者 display: block 的屬性進(jìn)行切換。
2. v-if
會根據(jù)初始的條件（data里自己的定義的數(shù)據(jù)）來進(jìn)行真正的渲染（組件真正的銷毀和重建），如果條件為真，才會開始渲染條件塊，如果條件為假，則不會渲染條件塊。
注意： v-if不要和v-for一起使用！
當(dāng)和 v-for 一起使用時，v-for 的優(yōu)先級比 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>
以上代碼將會經(jīng)過如下運(yùn)算
this.list.map( user=> {
if (isActive) {
return user.name
}
})
因此，哪怕我們只渲染一小部分元素，也得在每次重新渲染的時候遍歷整個列表，不論 isActive 是否發(fā)生了變化。如果 list 的數(shù)據(jù)有很多，就會造成性能低，頁面可能卡頓的現(xiàn)象出現(xiàn)。
總結(jié)
共同點(diǎn)：
v-if和v-show都是通過判斷綁定數(shù)據(jù)的true\false來展示的
不同點(diǎn)：
v-if只有在判斷為true的時候才會對數(shù)據(jù)進(jìn)行渲染，false的時候把包含的代碼進(jìn)行刪除。除非再次進(jìn)行數(shù)據(jù)渲染，v-if才會重新判斷。可以說是用法比較傾向于對數(shù)據(jù)一次操作。
v-show是無論判斷是什么都會先對數(shù)據(jù)進(jìn)行渲染，只是false的時候?qū)?jié)點(diǎn)進(jìn)行display:none;的操作。所以再不重新渲染數(shù)據(jù)的情況下，改變數(shù)據(jù)的值可以使數(shù)據(jù)展示或隱藏。
用法推薦：
v-if更適合于帶有權(quán)限的操作，渲染時判斷權(quán)限數(shù)據(jù)，有則展示該功能，沒有則刪除。
v-show更適合于日常使用，可以減少數(shù)據(jù)的渲染，減少不必要的操作。
綜上，v-if 有更高的切換消耗，而 v-show 有更高的初始渲染消耗。
因此，如果需要頻繁切換 v-show 較好，如果在運(yùn)行時條件不大可能改變，更傾向功能權(quán)限性的話 v-if 較好。
以上就是如何區(qū)分vue中的v-show 與 v-if 的詳細(xì)內(nèi)容，更多關(guān)于v-show 與 v-if 的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue2路由中router-view不顯示的原因及踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
深入理解Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)
本文通過實(shí)例代碼給大家介紹了Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)的相關(guān)知識，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-08-08
初學(xué)vue出現(xiàn)空格警告的原因及其解決方案
今天小編就為大家分享一篇初學(xué)vue出現(xiàn)空格警告的原因及其解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue打包相關(guān)細(xì)節(jié)整理(小結(jié))
這篇文章主要介紹了vue打包相關(guān)細(xì)節(jié)整理(小結(jié)),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關(guān)于Vue中@click事件的常見修飾符用法的相關(guān)資料,@click事件修飾符是在Vue組件中用來修改@click事件行為的特殊標(biāo)記,需要的朋友可以參考下2023-10-10
Vue 3 + Element Plus 封裝單列控制編輯的可編輯表格
在Web應(yīng)用開發(fā)中實(shí)現(xiàn)表格數(shù)據(jù)編輯功能至關(guān)重要,本文將詳細(xì)介紹如何使用Vue3和ElementPlus庫來構(gòu)建一個支持單列編輯的表格組件,本教程詳細(xì)闡述了組件創(chuàng)建過程和數(shù)據(jù)綁定機(jī)制,幫助你快速掌握Vue3中表格編輯功能的實(shí)現(xiàn),感興趣的朋友一起看看吧2024-09-09
vue2中的keep-alive使用總結(jié)及注意事項(xiàng)
vue2.0提供了一個keep-alive組件用來緩存組件,避免多次加載相應(yīng)的組件,減少性能消耗。本文給大家介紹vue2中的keep-alive使用總結(jié)及注意事項(xiàng)，需要的朋友參考下吧2017-12-12
Vue.js實(shí)現(xiàn)watch屬性的示例詳解
本文討論了watch函數(shù)是如何利用副作用函數(shù)和options進(jìn)行封裝實(shí)現(xiàn)的，也通過調(diào)度函數(shù)去控制回調(diào)函數(shù)的立即執(zhí)行和執(zhí)行時機(jī)，還可以解決競態(tài)問題，感興趣的可以了解一下2022-04-04
Vue生命周期和鉤子函數(shù)的詳解與經(jīng)典面試題
Vue生命周期是指vue實(shí)例對象從創(chuàng)建之初到銷毀的過程,vue所有功能的實(shí)現(xiàn)都是圍繞其生命周期進(jìn)行的,下面這篇文章主要給大家介紹了關(guān)于Vue生命周期和鉤子函數(shù)的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了Vue實(shí)現(xiàn)剪切板圖片壓縮功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02