vue-實現(xiàn)用戶的登錄頁面
html部分
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<title>登錄</title>
? ?<link rel="stylesheet" href="login.css">
? ?<script src="vue.js"></script>
</head>
<body>
? ?<div id="Application" style="text-align: center;">
? ? ? ?<div class="content">
? ? ? ? ? ?<h1>{{title}}</h1>
? ? ? ? ? ?<div class="account" style="font-size: 14px" v-if="noLogin">賬號：<input style="font-family: 楷體, sans-serif; font-size: 12px" v-model="userName" placeholder="請輸入昵稱~" type="text" /></div>
? ? ? ? ? ?<div class="password" style="font-size: 14px" v-if="noLogin">密碼：<input style="font-family: 楷體, sans-serif; font-size: 12px" v-model="password" placeholder="請輸入密碼~" type="password" /></div>
? ? ? ? ? ?<div class="login" style="font-size: 14px" v-on:click="click">{{buttonTitle}}</div>
? ? ? ?</div>
? ?</div>
? ?<script>
? ? ? ?const App = {
? ? ? ? ? ?data () {
? ? ? ? ? ? ? ?return {
? ? ? ? ? ? ? ? ? ?title:"賬戶登錄",
? ? ? ? ? ? ? ? ? ?noLogin:true,
? ? ? ? ? ? ? ? ? ?userName:"",
? ? ? ? ? ? ? ? ? ?password:"",
? ? ? ? ? ? ? ? ? ?buttonTitle:"登錄"
? ? ? ? ? ? ? ?}
? ? ? ? ? ?},
? ? ? ? ? ?methods: {
? ? ? ? ? ? ? ?click() {
? ? ? ? ? ? ? ? ? ?if (this.noLogin) {
? ? ? ? ? ? ? ? ? ? ? ?this.login()
? ? ? ? ? ? ? ? ? ?} else {
? ? ? ? ? ? ? ? ? ? ? ?this.logout()
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ?// 登錄
? ? ? ? ? ? ? ?login() {
? ? ? ? ? ? ? ? ? ?// 判斷賬號密碼是否為空
? ? ? ? ? ? ? ? ? ?if (this.userName.length > 0 && this.password.length > 0) {
? ? ? ? ? ? ? ? ? ? ? ?// 登錄提示后刷新頁面
? ? ? ? ? ? ? ? ? ? ? ?alert(`userName:${this.userName} password:********`)
? ? ? ? ? ? ? ? ? ? ? ?this.noLogin = false
? ? ? ? ? ? ? ? ? ? ? ?this.title = `賬戶:${this.userName}`
? ? ? ? ? ? ? ? ? ? ? ?this.buttonTitle = "注銷"
? ? ? ? ? ? ? ? ? ? ? ?this.userName = ""
? ? ? ? ? ? ? ? ? ? ? ?this.password = ""
? ? ? ? ? ? ? ? ? ?} else {
? ? ? ? ? ? ? ? ? ? ? ?alert("請輸入賬號密碼")
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ?// 登出
? ? ? ? ? ? ? ?logout() {
? ? ? ? ? ? ? ? ? ?// 清空登錄數(shù)據(jù)
? ? ? ? ? ? ? ? ? ?this.noLogin = true
? ? ? ? ? ? ? ? ? ?this.title = `賬戶登錄`
? ? ? ? ? ? ? ? ? ?this.buttonTitle = "登錄"
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?}
? ? ? ?Vue.createApp(App).mount("#Application")
? ?</script>
</body>
</html>
css 部分
#Application{
? ?margin: auto;
? ?width: 400px;
? ?height: 200px;
? ?background-image:linear-gradient(90deg, #b0dcef 0%, #d3e9ef 50%, #d3e9ef 50%, #b0dcef 100%);
? ?display: flex;
? ?position: relative;
}
h1{
? ?font-family: 楷體, sans-serif;
? ?font-size: 16px;
? ?color: #7ab2cb;
}
.content{
? ?width: 300px;
? ?height: 150px;
? ?margin: auto;
}
.account{
? ?margin-top: 5px;
}
.password{
? ?margin-top: 5px;
}
.login{
? ?width: 40px;
? ?height: 16px;
? ?margin: 15px auto;
? ?border: #948d8d solid 2px;
? ?background-color: #de9de5;
? ?font-family: 楷體, sans-serif;
? ?font-weight: bold;
}
.login:hover{
? ?border-color: #4f5152;
}
