摘要:是真實(shí)的條件渲染,因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中合適地銷毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。有時(shí)侯我們把一個(gè)元素當(dāng)做包裝元素,并在上面使用,最終的渲染結(jié)果根據(jù)條件的真假顯示。適合運(yùn)營條件不大可能改變適合頻繁切換。
1、v-show
(1)無論條件是真假都被編譯,然后被緩存,而且DOM元素保留渲染頁面結(jié)構(gòu)后,通過 "display:none" 控制元素狀態(tài),并且在之后一直存在。當(dāng)切換v-show模塊時(shí),只是簡單的更改css。
(2)v-show不支持tamplate標(biāo)簽
2、v-if
(1)當(dāng)切換v-if模塊時(shí),Vue.js 有一個(gè)局部編譯/卸載過程,因?yàn)?v-if 之中的模板也可能包括數(shù)據(jù)綁定或子組件。
v-if 是真實(shí)的條件渲染,因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中合適地銷毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。
v-if 是惰性的,如果為false,則什么也不錯(cuò)-不編譯,不渲染。 當(dāng)?shù)谝淮螚l件為真時(shí),才開始編譯。
(2)有時(shí)侯我們把一個(gè) 元素當(dāng)做包裝元素,并在上面使用 v-if,最終的渲染結(jié)果根據(jù)條件的真假顯示。
v-if適合運(yùn)營條件不大可能改變;v-show適合頻繁切換。
講解一個(gè)使用經(jīng)歷,寫了一個(gè)組件彈層,且滑動(dòng)輪播,根據(jù)輪播的內(nèi)容顯示是否含有切換的小圓點(diǎn),這樣需要new不同的實(shí)例,一開始是用的v-show,但是再次打開數(shù)據(jù)錯(cuò)亂了,找了一些方法讓數(shù)據(jù)銷毀,但是都沒有解決,最后發(fā)現(xiàn)v-if有銷毀DOM的作用,就這樣順利的解決啦。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/86713.html
摘要:并在上面使用,最終渲染結(jié)果將不包括元素。另外一個(gè)根據(jù)條件展示元素的指令,用法與大致相同。注意,不支持元素,也不支持與看完了文章,你會(huì)發(fā)現(xiàn)我們可以利用和兩個(gè)指令來控制我們元素的行為。 熟悉 Angular 的同學(xué)對(duì)指令肯定不會(huì)陌生,Vue中也借鑒了指令這一特性,在 Vue 中指令都是帶有 v- 的特殊屬性,那么指令有什么作用呢? 我的理解就是:指令是用來控制 DOM 元素的行為,例如最...
摘要:在中配合條件渲染一整組因?yàn)槭且粋€(gè)指令,需要將它添加到一個(gè)元素上。因此,如果需要非常頻繁地切換,則使用較好如果在運(yùn)行時(shí)條件不太可能改變,則使用較好。 vue的條件渲染 v-if v-if指令可以插入和刪除所命令的模板 Yes data:{ ok:true } 輸出HTML Yes 當(dāng)我們更改 ok 為 false時(shí)我們會(huì)發(fā)現(xiàn)頁面的 Yes 消失,在控制臺(tái)里面會(huì)發(fā)現(xiàn) h1 標(biāo)簽也已...
摘要:是真實(shí)的條件渲染,因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中合適地銷毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。有時(shí)侯我們把一個(gè)元素當(dāng)做包裝元素,并在上面使用,最終的渲染結(jié)果根據(jù)條件的真假顯示。適合運(yùn)營條件不大可能改變適合頻繁切換。 1、v-show(1)無論條件是真假都被編譯,然后被緩存,而且DOM元素保留渲染頁面結(jié)構(gòu)后,通過 display:none 控制元素狀態(tài),并且在之后一直存在。當(dāng)切換v-sho...
閱讀 2560·2021-09-22 15:25
閱讀 2968·2021-09-14 18:03
閱讀 1218·2021-09-09 09:33
閱讀 1704·2021-09-07 09:59
閱讀 2933·2021-07-29 13:50
閱讀 1503·2019-08-30 15:44
閱讀 1719·2019-08-29 16:22
閱讀 1289·2019-08-29 12:49