v-if和v-show能同時使用嗎?1、相同點:v-show 和 v-if 都能控制元素的顯示和隐藏,我來為大家講解一下關于v-if和v-show能同時使用嗎?跟着小編一起來看一看吧!
1、相同點:
v-show 和 v-if 都能控制元素的顯示和隐藏。
2、不同點:
(2.1)實現本質方法不同
v-show 本質就是通過設置 css 中的 display 設置為 none,控制隐藏
v-if 是動态的向 dom 樹内添加或者删除 DOM 元素
(2.2)編譯的區别
v-show 其實就是在控制 css
v-if 切換有一個局部編譯/卸載的過程,切換過程中合适地銷毀和重建内部的事件監聽和子組件。
(2.3)編譯的條件v-show 都會編譯,初始值為 false,隻是将 display 設為 none,但它也編譯了
v-if 初始值為 false,就不會編譯了
(2.4)性能比較
v-show 隻編譯一次,後面其實就是控制 css,而 v-if 不停的銷毀和創建,故 v-show性能更好一。
3、注意點:
因為 v-show 實際是操作 display:" "或者 none,當 css 本身有 display:none 時,v-show無法讓顯示。
4、總結(适用場景):
如果要頻繁切換某節點時,使用 v-show(無論 true 或者 false 初始都會進行渲染,此後通過 css 來控制顯示隐藏,因此切換開銷比較小,初始開銷較大),如果不需要頻繁切換某節點時,使用 v-if(因為懶加載,初始為 false 時,不會渲染,但是因為它是通過添加和删除 dom元素來控制顯示和隐藏的,因此初始渲染開銷較小,切換開銷比較大)。
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!