全國(guó)咨詢(xún)/投訴熱線(xiàn):400-618-4000

首頁(yè)技術(shù)文章正文

v-show和v-if有什么區(qū)別?

更新時(shí)間:2020-09-14 來(lái)源:黑馬程序員 瀏覽量:

vue中顯隱方法常用兩種,v-show和v-if,但這兩種是有區(qū)別的。

實(shí)現(xiàn)本質(zhì)方法區(qū)別

v-show本質(zhì)就是標(biāo)簽display設(shè)置為none,控制隱藏

v-if是動(dòng)態(tài)的向DOM樹(shù)內(nèi)添加或者刪除DOM元素

編譯的區(qū)別

v-show其實(shí)就是在控制css

v-if切換有一個(gè)局部編譯/卸載的過(guò)程,切換過(guò)程中合適地銷(xiāo)毀和重建內(nèi)部的事件監(jiān)聽(tīng)和子組件

編譯的條件

v-show都會(huì)編譯,初始值為false,只是將display設(shè)為none,但它也編譯了

v-if初始值為false,就不會(huì)編譯了

性能

v-show只編譯一次,后面其實(shí)就是控制css,而v-if不停的銷(xiāo)毀和創(chuàng)建,故v-show性能更好一點(diǎn)。

用法

v-if更靈活,例如

1600073982573_v-if與v-show.jpg



猜你喜歡:

好用的前端開(kāi)發(fā)工具:這四款你必須知道!

前端面試題:兼容性面試題匯總


分享到:
在線(xiàn)咨詢(xún) 我要報(bào)名
和我們?cè)诰€(xiàn)交談!