TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超7個(gè)贊
在 Vue.js ，使用 v-if 指令判斷元素顯示
1 2 | <h1 v-if="ok">Yes</h1> <!-- 當(dāng)ok為true時(shí)，該元素顯示，否則不顯示--> |
在 <template> 中配合 v-if 條件渲染一整組
因?yàn)?nbsp;v-if 是一個(gè)指令，需要將它添加到一個(gè)元素上。但是如果想切換多個(gè)元素，此時(shí)可以把一個(gè) <template> 元素當(dāng)做包裝元素，并在上面使用 v-if。最終的渲染結(jié)果不會(huì)包含 <template> 元素。
1 2 3 4 5 | <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> |
v-if 是“真正的”條件渲染，因?yàn)樗鼤?huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N(xiāo)毀和重建。
v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開(kāi)始渲染條件塊。
相比之下， v-show 就簡(jiǎn)單得多——不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換。
一般來(lái)說(shuō)， v-if 有更高的切換開(kāi)銷(xiāo)，而 v-show 有更高的初始渲染開(kāi)銷(xiāo)。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件不太可能改變，則使用 v-if 較好。
TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超3個(gè)贊
1 2 3 4 5 6 | <div id="example01"> <p v-if="male">Male</p> <p v-if="female">Female</p> <p v-if="age>25">Age:{{age}}</p> <p v-if="name.indexOf('lin')>0">Name:{{name}}</p> </div> |
當(dāng)age大于25時(shí)，Age那一行顯示，否則不進(jìn)行顯示
當(dāng)name包含'lin'時(shí)，顯示該行，否則不顯示
舉報(bào)