使用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>