Vue实现登录界面切换

<template> <div><div id = "app"> <h1 class="login_title">用户登录</h1> <div class = "login_header_title"> <a class = "title1" rel="external nofollow" rel="external nofollow" href="javascript:;" rel = "external nofollow" @click = "loginWay = true"><b>短信登录</b></a> <a class = "title2" rel="external nofollow" rel="external nofollow" href="javascript:;" rel = "external nofollow" @click = "loginWay = false"><b>密码登录</b></a> </div> <div :class = "{on : !loginWay}"> <section class = "login_message"> <input type="text" maxlength="11" placeholder="手机号"> <button disabled = "disabled" class = "get_verfication" >获取验证码</button> </section> <section class = "login_verfication"> <input type="text" maxlength="8" placeholder="验证码"> </section > <section class = "login_hint"> 温馨提示：未注册账号的手机号，登录时将自动注册，且代表已同意 <a rel="external nofollow" href="javaScript:;">《用户服务协议》</a> </section> </div> <div :class = "{on : loginWay}"> <section class = "login_message"> <input type="text" maxlength="11" placeholder="手机号/邮箱/用户名"> </section> <section class = "login_verfication"> <input type="text" maxlength="11" minlength="6" placeholder="密码"> </section> <section class = "login_message"> <input type="text" maxlength="4" placeholder="验证码"> <img src="" alt=""> </section> </div> <div class = "login_bottom"> <button class = "login_bottom_btn">登录</button> <p>关于我们</p> </div> </div> </div></template><script> export default { data() { return { loginWay:true } }, }</script><style scoped> #app{ width:500px; height:500px; margin-left:50px; border:1px solid black; } .login_title{ color:green; text-align:center; } .login_header_title{ clear:both; } .title1{ color:green; margin-left: 120px; margin-bottom: 15px; float:left; } .title2{ color:green; margin-right: 97px; margin-bottom: 15px; float:right; } .login_message{ float:left; margin-left:120px; margin-bottom: 20px; } .login_message input{ width:280px; height:30px; } .get_verfication{ position:absolute; border:none; outline:none; top:135px; left:380px; } .login_verfication input{ width:280px; height:30px; } .login_verfication{ float:left; margin-left:120px; margin-bottom: 20px; } .login_hint{ float:left; margin-left:120px; width:280px; } .login_hint a{ text-decoration: none; } .on{ display: none; } .login_bottom p{ float:left; margin-left:230px; margin-top:15px; } .login_bottom_btn{ background-color:limegreen; border:none; float:left; margin-top:20px; margin-left:120px; width:280px; height:30px; } </style>

HTML div三边怎么加边框win7中qq截图快捷键是什么Qiankun JS沙箱是怎么做隔离的