要求：
在不使用页面跳转，在同一个前端网页实现登录和注册页面，而且根据点击可以使登录和注册页面交替显示。
思路：
主要使用Vue的v-show属性，根据点击超链接，然后把定义的值取反，从而导致div盒子的交替显示。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册/登录</title> <script src="../vue/vue.min.js"></script> <script src="../vue/axios.min.js"></script> </head> <body> <div id="app"> <div v-show="!isInputShow"> <h2>登录</h2> 昵称：<input type="text" name="username"><br> 密码：<input type="password" name="password"><br> <button>登录</button><br><br><br> 没有账户，请先<a href="javascript:void(0)" @click="exchange1">注册</a> </div> <div v-show="isInputShow"> <h2>注册</h2> 昵称：<input type="text" name="username"><br> 密码：<input type="password" name="password"><br> <button>注册</button><br><br><br> 已有账号，直接<a href="javascript:void(0)" @click="exchange1">登录</a> </div> </div> </body> <script> new Vue({ el:'#app', data:{ isInputShow:false, }, methods:{ exchange1(){ this.isInputShow=!this.isInputShow } } }) </script> </html>
效果展示：
3379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
