v-if/v-show -- 顯示隱藏 · Vue&&TypeSprict--基礎總結

[TOC] >[success] # v-if /v-show -- 真顯示 ~~~ 1.v-if 的特點：每次都會重新刪除或創建元素("條件塊內的事件監聽器和子組件適當地被銷毀和重建"), v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊 2.v-show 的特點：不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換 , 每次不會重新進行DOM的刪除和創建操作，只是切換了元素的 display:none 樣式 3.v-if 有較高的切換性能消耗 4.v-show 有較高的初始渲染消耗(不管真假都創建。v-if 只有真才創建) 5. 如果元素涉及到頻繁的切換，最好不要使用 v-if, 而是推薦使用 v-show 6. 如果元素可能永遠也不會被顯示出來被用戶看到，則推薦使用 v-if ~~~ >[info] ## v-if 真顯示 ~~~ 1.v-if 條件為真則顯示 2.在 '<template>' 元素上配合 v-if 使用的好處，就是可以將'<template>'作為一個整體，且渲染的時候不顯示'<template>' 3.'v-if' 配合'v-else' 使用 4.'v-if' 配合'v-else-if' 和 'v-else' 使用 ~~~ >[danger] ##### 綜合案例 ![](https://box.kancloud.cn/22a50e5b286cd58be46907519772ee33_301x115.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <p v-if="msg==1">1</p> <p v-else-if="msg==2">2</p> <p v-else="msg==3">3</p> <input v-model="pushArray"> <button @click="changeMsg">提交</button> </div> <script> var vm = new Vue({ el: '#app', data: { pushArray:'', msg:1, }, methods:{ changeMsg(){ this.msg = this.pushArray; } } }); </script> </body> </html> ~~~ >[danger] ##### vue 文檔中對 v-if 和 key的聯合使用說明 ~~~ 1.下面代碼的問題就是在input 輸入內容后，切換后input中的內容依舊存在，出現這種問題通過上個章節中的第一個圖解可以很好解釋，這種情況下dom是不會重新渲染的 ~~~ ![](https://img.kancloud.cn/f7/f4/f7f443d80cbd748d226fbc71370da03a_1228x517.png) ~~~ html <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address"> </template> ~~~ * 解決加一個key ~~~ 1.這里要注意的是為什么單獨給input 加key，原因為了讓<label> 元素仍然會被高效地復用 ~~~ ~~~ <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template> ~~~ >[info] ## v-show ~~~ 1.真顯示，v-show 不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。 ~~~ >[danger] ##### 案例 ~~~ <p v-show="msg==3">3</p> ~~~ >[danger] ##### 注意 ~~~ 1.注意，v-show 不支持 <template> 元素，也不支持 v-else。 ~~~ >[info] ## v-if 和 v-for ~~~ 1.當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級,下面的案例會先循環后if判斷 <li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li> ~~~