Vue フレームワークはフロントエンドログインインターフェースを構築します

vue フレームワークを使用してフロントエンドログインインターフェイスを構築し、v-bind を使用してクラスを導入し、v-model を使用してデータバインディングを実装し、v-on を使用してイベント処理メカニズムを実装します。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <script src="vue.js"></script>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            background: #0fc4ca;
        }

        h1 {
            color: #FFF;
            text-align: center;
        }

        .container {
            margin: 100px auto;
            width: 30%;
        }

        form {
            background: #FFF;
            height: 330px;
            width: 100%;
            border-radius: 10px;
            position: relative;
        }

        label {
            color: #000;
            font-weight: bold;
            font-size: 20px;
            margin-left: 40px;
        }

        input {
            text-align: left;
            margin: 10px;
        }

        .input {
            width: 80%;
            height: 35px;
            margin-left: 40px;
        }

        .checkbox {
            margin-left: 30px;
        }

        a {
            text-decoration: none;
            font-weight: bold;
        }

        .submit {
            display: inline-block;
            margin-top: 0;
            margin-left: 145px;
            background: #000;
            border: none;
            color: #FFF;
            height: 35px;
            width: 100px;
            text-align: center;
            font-weight: bold;
            border-radius: 5px;
        }

        .left {
            margin: 20px;
        }

        .right {
            position: absolute;
            right: 20px;
        }

        .btn {
            width: 180px;
            height: 35px;
            letter-spacing: 3px;
            background-color: aqua;
            border-radius: 5px;
            border-color: transparent;
            font-size: 16px;
            color: #fff;
            box-shadow: inset 0 -4px 2px 0 rgb(0, 0, 0, 0.2);
            margin-right: 1px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="./js/login01.js"> </script>
    <!--<script>
        function checkuserpwd() {
    var username = document.getElementById("uname").value;
    var userpwd = document.getElementById("upwd").value;

    if (username == "g" && userpwd == "123") {
        alert("登陆成功!");
        setInterval(function () {
            location.href = "index.html";
        }, 1000);
        return true;
    }
    else {
        alert("用户名或密码有误，登陆失败1");
        return false;
    }
}

function resetuserpwd()
{
    document.getElementById("uname").value="";
    document.getElementById("upwd").value="";
}
    </script>-->
</head>

<body>
    <div class="container" id="app">
        <h1>用户登录</h1>
        <form>
            <br>
            <label for="username">用户名</label><br>
            <input type="text" name="username" id="uname" v-bind:class="input" value="" placeholder="用户名admin"><br>
            <label for="pwd">密码</label><br>
            <input type="password" name="" id="upwd" v-bind:class="input" value="" placeholder="密码admin">
            <div v-bind:class="checkbox">
                <input type="checkbox" name="">
                <span>记住密码</span>
            </div>
            <div v-bind:class="checkbox">
                <input type="reset" name="submit2" value="重置" v-bind:class="btn" v-on:onclick="resetuserpwd()">
                <button v-bind:class="btn " type="button" onclick="checkuserpwd()">开始登录</button>
            </div>
            <br>
            <a href="#" v-bind:class="left">返回首页</a>
            <a href="table01.html" v-on:v-bind:class='right'>注册账号</a>
        </form>
    </div>

    <script>
        var vm = new Vue
            ({
                el: '#app',
                data:
                {
                    input: 'input',
                    checkbox: 'checkbox',
                    btn: 'btn',
                    left: 'left',
                    right: 'right',
                },
                methods:
                {
                    resetuserpwd: function () {
                        this.document.getElementById("uname").value = "";
                        this.document.getElementById("upwd").value = "";
                    },
                    checkuserpwd: function () {
                        var username = this.document.getElementById("uname").value;
                        var userpwd = this.document.getElementById("upwd").value;

                        if (username == "g" && userpwd == "123") {
                            alert("登陆成功!");
                            setInterval(function () {
                                location.href = "index.html";
                            }, 1000);
                            return true;
                        }
                        else {
                            alert("用户名或密码有误，登陆失败1");
                            return false;
                    }
                },
                },
            })
    </script>
</body>

</html>

Vue フレームワークはフロントエンド ログイン インターフェースを構築します

おすすめ

Vue フレームワークはフロントエンドログインインターフェースを構築します