Vue实现登录界面切换

<template>
  <div>
<div id = "app">
        <h1 class="login_title">用户登录</h1>
        <div class = "login_header_title">
            <a class = "title1" href="javascript:;" rel = "external nofollow"   @click = "loginWay = true"><b>短信登录</b></a>
            <a class = "title2" 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 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>