摘要:是真實的條件渲染,因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內的事件監聽器和子組件。有時侯我們把一個元素當做包裝元素,并在上面使用,最終的渲染結果根據條件的真假顯示。適合運營條件不大可能改變適合頻繁切換。
1、v-show
(1)無論條件是真假都被編譯,然后被緩存,而且DOM元素保留渲染頁面結構后,通過 "display:none" 控制元素狀態,并且在之后一直存在。當切換v-show模塊時,只是簡單的更改css。
(2)v-show不支持tamplate標簽
2、v-if
(1)當切換v-if模塊時,Vue.js 有一個局部編譯/卸載過程,因為 v-if 之中的模板也可能包括數據綁定或子組件。
v-if 是真實的條件渲染,因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內的事件監聽器和子組件。
v-if 是惰性的,如果為false,則什么也不錯-不編譯,不渲染。 當第一次條件為真時,才開始編譯。
(2)有時侯我們把一個 元素當做包裝元素,并在上面使用 v-if,最終的渲染結果根據條件的真假顯示。
v-if適合運營條件不大可能改變;v-show適合頻繁切換。
講解一個使用經歷,寫了一個組件彈層,且滑動輪播,根據輪播的內容顯示是否含有切換的小圓點,這樣需要new不同的實例,一開始是用的v-show,但是再次打開數據錯亂了,找了一些方法讓數據銷毀,但是都沒有解決,最后發現v-if有銷毀DOM的作用,就這樣順利的解決啦。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115463.html
摘要:并在上面使用,最終渲染結果將不包括元素。另外一個根據條件展示元素的指令,用法與大致相同。注意,不支持元素,也不支持與看完了文章,你會發現我們可以利用和兩個指令來控制我們元素的行為。 熟悉 Angular 的同學對指令肯定不會陌生,Vue中也借鑒了指令這一特性,在 Vue 中指令都是帶有 v- 的特殊屬性,那么指令有什么作用呢? 我的理解就是:指令是用來控制 DOM 元素的行為,例如最...
摘要:在中配合條件渲染一整組因為是一個指令,需要將它添加到一個元素上。因此,如果需要非常頻繁地切換,則使用較好如果在運行時條件不太可能改變,則使用較好。 vue的條件渲染 v-if v-if指令可以插入和刪除所命令的模板 Yes data:{ ok:true } 輸出HTML Yes 當我們更改 ok 為 false時我們會發現頁面的 Yes 消失,在控制臺里面會發現 h1 標簽也已...
摘要:是真實的條件渲染,因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內的事件監聽器和子組件。有時侯我們把一個元素當做包裝元素,并在上面使用,最終的渲染結果根據條件的真假顯示。適合運營條件不大可能改變適合頻繁切換。 1、v-show(1)無論條件是真假都被編譯,然后被緩存,而且DOM元素保留渲染頁面結構后,通過 display:none 控制元素狀態,并且在之后一直存在。當切換v-sho...
閱讀 1241·2021-11-08 13:25
閱讀 1440·2021-10-13 09:40
閱讀 2773·2021-09-28 09:35
閱讀 735·2021-09-23 11:54
閱讀 1123·2021-09-02 15:11
閱讀 2431·2019-08-30 13:18
閱讀 1668·2019-08-30 12:51
閱讀 2685·2019-08-29 18:39