使用双向绑定实现用户注册页面
效果图展示
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue@next"></script>
<style type="text/css">
#app{
height: 500px;
width: 500px;
margin-left: 100px;
}
#app>div{
width: 500px;
height: 50px;
line-height: 50px;
}
span{
display: inline-block;
width: 70px;
font-size: 18px;
}
input{
height: 25px;
border: 3px solid #646464;
border-radius: 4px;
}
.regBtn{
width: 150px;
height: 35px;
text-align: center;
border: none;
border-radius: 5px;
background-color: #4eea72;
font-size: 18px;
font-weight: 800;
color: #FFFFFF;
margin-left: 70px;
}
.hint{
color: #e51519;
font-size: 15px;
margin-left: 15px;
}
.suc{
font-size: 20px;
color: #FF0000;
}
</style>
</head>
<body>
<div id="app">
</div>
<template id="root">
<div >
<span>用户名:</span>
<input type="text" v-model="userName" @blur="name()"/>
<label class="hint">{
{nameHint}}</label>
</div>
<div >
<span>密码:</span>
<input type="password" v-model="password" @blur="pwd()" @keydown.enter="submit()"/>
<label class="hint">{
{pwdHint}}</label>
</div>
<div class="">
<button type="button" class="regBtn" @click="submit()">注册</button>
</div>
<div class="suc">
{
{success}}
</div>
</template>
<script type="text/javascript">
const app = Vue.createApp({
template:'#root',
data(){
return {
userName:"",
nameHint:"",
password:"",
pwdHint:"",
success:""
}
},
methods:{
name(){
if(this.userName == ''){
this.nameHint="昵称不能为空";
}else{
this.nameHint="";
}
},
pwd(){
if(this.password == ''){
console.log("密码不能为空")
this.pwdHint="密码不能为空";
}else{
this.pwdHint="";
}
},
submit(){
console.log(this.userName, this.password)
if(this.userName=="" || this.password==""){
this.success="请填写用户名和密码";
}else if(this.userName=="admin" && this.password=="123456"){
this.success="恭喜你，登陆成功!"
}else{
this.success="抱歉，登陆失败"
}
},
}
})
// app.component('#app',app)
app.mount('#app')
</script>
</body>
</html>