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)