v show跟v if的區別

2021-10-23 05:35:05 字數 893 閱讀 1228

v-show 指令: 根據表示式之真假值,切換元素的 display css 屬性。

注意:一般值適用布林型別,不過其他型別的值也沒有問題,不過要注意型別的轉換。

v-if 指令: 通過表示式的值來控制元素是否渲染 (v-if=『***』 ***就是表示式)

v-if 的效果與 v-show 基本一樣,但是有區別:

1.v-if: 是真正的資料渲染,預設條件為 false 時元素不渲染,預設條件為 true 時元素渲染;條件為 false 時元素會銷毀,條件為 true 時元素會重新建立。

v-show 是簡單的的去控制 css 中的 display 屬性。

2.v-if 有更高的切換開銷 (切換時做銷毀和重建的操作);

v-show 有更高的初始渲染開銷(因為不管預設條件為 true 還是 false ,都會渲染出來);

如果頻繁切換顯示隱藏使用功能,用 v-show 更好,其餘時間使用 v-if 即可。

v-if 有 v-else-if 和 v-else 配套使用;

v-show 孤零零乙個人。

v-if 能配合 template 元素使用,而 v-sho 不行;

那麼問題來了,為什麼 v-show 不能跟與 template 去使用呢?

答:因為 template 是不會渲染出來的, v-show 是要去控制元素的 css 屬性的 。

v if與v show的區別?

在切換v if塊時,vue.js 有乙個區域性編譯 解除安裝過程,因為v if之中的模板也可能包括資料繫結或子元件。v if是真實的條件渲染,因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內的事件 和子元件。v if也是惰性的 如果在初始渲染時條件為假,則什麼也不做 在條件第一次變為真時才開始區...

v if 和 v show的區別

簡單來說,v if 的初始化較快,但切換代價高 v show 初始化慢,但切換成本低 都是動態顯示dom元素 1 手段 v if是動態的向dom樹內新增或者刪除dom元素 v show是通過設定dom元素的display樣式屬性控制顯隱 2 編譯過程 v if切換有乙個區域性編譯 解除安裝的過程,切...

v if 和 v show 的區別

v if 和 v show 在頁面都展示為顯示隱藏 如 v if 為true的時候,div顯示,當為false的時候,div消失,也消失,相當於刪除了div,當為true的時候在重新渲染出來這個div 他是惰性的,只有為真的時候才會被渲染,否則什麼也不做 而且還有v if 和v else div v...