<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <h1>{{ isLogin ? '登录' : '注册' }}</h1> <form action="" v-if='isLogin' > <input type="text" placeholder="请输入用户名" /> <input type="password" placeholder="请输入密码" /> <input type="submit" name="" id="" value="登录" /> </form> <form action="" v-if='!isLogin'> <input type="text" placeholder="请输入用户名" /> <input type="password" placeholder="请输入密码" /> <input type="password" placeholder="请再次输入密码" /> <input type="submit" name="" id="" value="注册" /> </form> <hr /> <hr /> <form action="" v-show='isLogin' > <input type="text" placeholder="请输入用户名" /> <input type="password" placeholder="请输入密码" /> <input type="submit" name="" id="" value="登录" /> </form> <form action="" v-show='!isLogin'> <input type="text" placeholder="请输入用户名" /> <input type="password" placeholder="请输入密码" /> <input type="password" placeholder="请再次输入密码" /> <input type="submit" name="" id="" value="注册" /> </form> <!-- 条件渲染： v-if:在只渲染一次的情况下，那么性能最佳 v-show:在频繁切换的情况下，那么性能最佳，因为v-show，所有都生成出来，通过display来决定是否显示 --> <button @click='login'>登录</button> <button @click='register'>注册</button> </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ isLogin:true }, methods:{ register:function(){ this.isLogin = false }, login:function(){ this.isLogin = true } } }) </script> </body> </html>