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