条件渲染 · vue笔记

[TOC] >[success] # 条件渲染如果 **频繁的显示隐藏** 建议使用 **v-show** ，因为 **v-if** 会 **重新渲染dom元素** ，以及 **v-if** 还有配套的 **v-else** 、**v-else-if** ，如下 **demo** ： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>条件渲染</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ show: false, condition: true } }, template: ` <div v-if="show">if</div> <div v-else-if="condition">else if</div> <div v-else>else</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 这种写法 **if** 要跟 **else** 或 **else-if** 使用的标签，贴在一起使用，不然会报错。