tft每日頭條

 > 生活

 > v-if和v-show能同時使用嗎

v-if和v-show能同時使用嗎

生活 更新时间:2024-12-21 10:56:36

v-if和v-show能同時使用嗎?1、相同點:v-show 和 v-if 都能控制元素的顯示和隐藏,我來為大家講解一下關于v-if和v-show能同時使用嗎?跟着小編一起來看一看吧!

v-if和v-show能同時使用嗎(24v-show和)1

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每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved