v-if/v-show -- 條件渲染 · vue3.x -- 系列學習

>[success] # v-if/v-show -- 條件渲染 1. 當想控制頁面節點是否顯示時候可以使用`v-if/v-show` 這兩個指令，相同點這些內容只有在條件為`true`時，才會被渲染出來 **不同點** * `v-if` 是**惰性**的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊 * `v-show`：不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于`display `屬性會被切換 ***** 2. `v-if` 有較高的切換性能消耗（要不停的創建和刪除dom），`v-show` 有較高的初始渲染消耗（初始話后完全依靠css 顯示隱藏） 3. 如果元素涉及到頻繁的切換，**最好不要使用 v-if, 而是推薦使用 v-show**，如果元素可能永遠也不會被顯示出來被用戶看到，則推薦使用` v-if ` >[info] ## v-if 案例 1. `v-if ` 可以配合 `v-else-if` 和 `v-else` 使用 2. `v-if`是一個指令，他必須依附于某個元素。有些情況下可以配合`<template>`，好處，就是可以將`<template>`作為一個整體，且渲染的時候不顯示`<template>` ![](https://img.kancloud.cn/15/21/1521d1428508be560bc10ca3b3c12646_331x129.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <template v-if="msg !== 10"> <p v-if="msg === 1">1</p> <p v-else-if="msg === 2">2</p> <p v-else>3</p> </template> <input v-model.number="msg" /> </div>  <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return { msg: 1, } }, }) app.mount('#app') </script> </body> </html> ~~~ >[info] ## v-show 案例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <div> <button @click="toggle">切換</button> </div> <div v-show="isShowCode"> <img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt="" /> </div> <div v-if="isShowCode"> <img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt="" /> </div> </div>  <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ // data: option api data() { return { isShowCode: true, } }, methods: { toggle() { this.isShowCode = !this.isShowCode }, }, }) app.mount('#app') </script> </body> </html> ~~~ >[info] ## 官網位置 [參考](https://cn.vuejs.org/guide/essentials/conditional.html#v-if-vs-v-show)