一、區別
v-if
動態的向DOM樹內添加或者刪除DOM元素;“真正”的條件渲染,因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建;在初始渲染條件為假時,什么也不做。
v-show
通過設置DOM元素的display樣式屬性控制顯示和隱藏;不管初始條件是什么,元素總是會被渲染,並且只是簡單地基於 CSS 進行切換。
總結:v-if有更高的切換消耗;v-show有更高的初始渲染消耗。
二、應用場景
1、v-if適合運行條件很少改變的情況; v-show適合頻繁切換的情況。
2、對於管理系統權限列表的展示,這里可以使用v-if來渲染,如果使用v-show,對於用戶沒有的權限,在網頁的源碼中,仍然能夠顯示。
3、特殊情況:在el-table中控制某列的顯示與隱藏只能使用v-if。