Vue实现登录界面切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src = "https://unpkg.com/vue"></script>
    <title>登陆方式切换升级版</title>
    <style>
        #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>
</head>
<body>
    <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>
    
    <script>
        new Vue({
            el:'#app',
            data(){
                return{
                    loginWay:true
                }  
            }
        })
        
    </script>
</body>
</html>

效果图如下：
第一次制作gif动图

参考文章链接

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue