如何利用Vue.js庫中的v-if內(nèi)部指令判斷元素顯示
3 回答
溫溫醬
TA貢獻(xiàn)1752條經(jīng)驗 獲得超4個贊
在 Vue.js ，使用 v-if 指令判斷元素顯示
1 2 | <h1 v-if="ok">Yes</h1> <!-- 當(dāng)ok為true時，該元素顯示，否則不顯示--> |
在 <template> 中配合 v-if 條件渲染一整組
因為 v-if 是一個指令，需要將它添加到一個元素上。但是如果想切換多個元素，此時可以把一個 <template> 元素當(dāng)做包裝元素，并在上面使用 v-if。最終的渲染結(jié)果不會包含 <template> 元素。
1 2 3 4 5 | <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> |
v-if 是“真正的”條件渲染，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r，才會開始渲染條件塊。
相比之下， v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。
一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件不太可能改變，則使用 v-if 較好。
慕神8447489
TA貢獻(xiàn)1780條經(jīng)驗 獲得超1個贊
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時，Age那一行顯示，否則不進行顯示
當(dāng)name包含'lin'時，顯示該行，否則不顯示
添加回答
舉報
0/150
提交
取消