如何利用Vue.js庫中的v-show顯示和隱藏元素?
2 回答

蝴蝶刀刀
TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超8個(gè)贊
<h1 v-show="ok">Hello!</h1>
如果ok這個(gè)變量為真,就會(huì)顯示Hello!
v-show 是簡單的切換元素的 CSS 屬性 display ,也就是會(huì)占用瀏覽器內(nèi)存空間,
另外一個(gè)類似的是 v-if
v-if 是真實(shí)的條件渲染,因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中適當(dāng)?shù)劁N毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。
v-if 也是惰性的:如果在初始渲染時(shí)條件為假,則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯(編譯會(huì)被緩存起來)。
相比之下, v-show 簡單得多——元素始終被編譯并保留,只是簡單地基于 CSS 切換。
一般來說, v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此,如果需要頻繁切換使用 v-show 較好,如果在運(yùn)行時(shí)條件不大可能改變則使用 v-if 較好。
添加回答
舉報(bào)
0/150
提交
取消