v-if和v-show区别

时间:2025-04-07 14:50:08
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div v-if="isIf">v-if</div> <div v-show="ifShow">v-show</div> <button @click="toggleShow()">点击按钮</button> </div> </body> <script src="vueDist/"></script> <script> new Vue({ el:"#app", data:{ isIf : true, ifShow : true, }, methods:{ toggleShow:function () { this.ifShow = this.ifShow ? false : true; this.isIf = this.isIf ? false : true; } } }) </script> </html>