登录和注册的隐藏与显示
在开发中经常会用到，在注册与登录上也会比较伤脑筋，所以这里我用一个案例来说明：
1.点击主页面后弹出的一个登录弹框，默认显示是登录界面
HTML代码
<!--
type: input的类型 text为“文本框” password为“密码框” submit为“按钮框”
name： 名称
id： 只有唯一的id值
placeholder： 输入框中默认的文字
v-model： 双向数据绑定
@blur： 绑定变量名
-->
<div class="login">
<div v-show="showLogin">
<div>
<input type="text" name="phone" id="phone" placeholder="请输入手机号" v-model="phone" @blur="phoneVerify()"/>
<!-- 将{
{}}绑定提示信息或者警告信息 当输入错误或者未输入进行信息提示 -->
<p>{
{phoneMessage}}</p>
</div>
<div >
<input type="password" name="password" id="password" placeholder="请输入密码" v-model="password" @blur="Passwordvalidation()"/>
<p>{
{pwdMessage}}</p>
</div>
<div>
<input type="submit" value="登陆" class="log" @click="login()"/>
</div>
<div>
<input type="submit" value="注册" class="register" v-on:click="ToRegister" />
</div>
</div>
</div>
JavaScript代码
<script>
export default {
name:'Login',
data(){
return{
phone:'',
//登录手机号绑定的值
phoneMessage:'',
password:'',
//登录密码绑定的值
pwdMessage:'',
}
},
methods:{
/**隐藏登陆页面 */
hiddenLogin(){
this.$store.commit('hiddenLogin');
},
/**手机号码验证 */
phoneVerify(){
if(this.phone==''){
this.phoneMessage='请输入手机号';
return ;
}
else{
/**res.data.exist=1说明有此账号 */
_phoneVerify(this.phone).then(res=>{
if(res.data.exist!=1){
this.phoneMessage='手机号错误'
}else{
this.phoneMessage=''
}
})
}
},
// 密码验证
Passwordvalidation(){
if(this.password==''){
this.pwdMessage='请输入密码';
return;
}
},
/**登陆 */
login(){
_login(this.phone,this.password).then(res=>{
if(res.data.code!=200){
this.pwdMessage='密码错误';
}
else{
this.$store.commit('addUser',res.data);
this.hiddenLogin();
this.$bus.$emit('pullResource',res.data.cookie);
}
})
},
}
</script>
CSS代码（仅供参考可自行设计）
.login {
width: 400px;
height: 560px;
position:relative;
z-index:999;
top:0px;
background: #fafafa;
}
.from-item {
color: red;
width: 60%;
margin: 0px auto;
padding: 10px 0px 10px 10px;
}
.from-item input{
margin: 10px;
}
input {
width: 200px;
height: 2em;
outline:none;
}
input.log:hover {
background: #c72e2e;
}
p {
font-size: 13px;
}
.log {
outline-style: none;
background: red;
color: #fff;
border: 0;
height: 40px;
border-radius: 10px;
cursor: pointer;
}
.register {
border: none;
background: none;
cursor: pointer;
}
这样登录页面就完成了看下效果图吧
2.现在我们要点击注册后跳转至注册页面
2.1在同级DIV下创建另外一个注册的盒子包裹里面的内容
HTML代码
<div class="login">
<!-- 登录模块 -->
<div v-show="showLogin">
<div>
<input type="text" name="phone" id="phone" placeholder="请输入手机号" v-model="phone" @blur="phoneVerify()"/>
<!-- 将{
{}}绑定提示信息或者警告信息 当输入错误或者未输入进行信息提示 -->
<p>{
{phoneMessage}}</p>
</div>
<div >
<input type="password" name="password" id="password" placeholder="请输入密码" v-model="password" @blur="Passwordvalidation()"/>
<p>{
{pwdMessage}}</p>
</div>
<div>
<input type="submit" value="登陆" class="log" @click="login()"/>
</div>
<div>
<input type="submit" value="注册" class="register" v-on:click="ToRegister" />
</div>
</div>
<!-- 注册模块 -->
<div v-show="showRegister">
<div>
<input type="text" name="nickname" id="nickname" placeholder="请输入昵称" required v-model="nickname"/>
</div>
<div >
<input type="text" name="phone" id="phone" placeholder="请输入手机号" required v-model="phone" @blur="RegisterphoneVerify()"/>
<p>{
{registerphoneMessage}}</p>
</div>
<div>
<input type="password" name="password" id="password" placeholder="请输入密码" v-model="password" />
<p>{
{registerpwdMessage}}</p>
</div>
<div>
<input type="submit" value="确定" class="log" @click="login()"/>
</div>
<div>
<span v-on:click="ToLogin">跳回登录页面</span>
</div>
</div>
</div>
JavaScript代码
<script>
export default {
name:'Login',
data(){
return{
phone:'',
//登录手机号绑定的值
phoneMessage:'',
password:'',
//登录密码绑定的值
pwdMessage:'',
// 登录页面默认显示为true
showLogin:true,
// 注册页面默认隐藏为false
showRegister:false,
registerphoneMessage:'',
nickname:'',
phone:'',
password:''
}
methods:{
//可将登录与注册的都写在一起我这里为了方面演示，将其分开了
// 跳转至注册页面，点击后showRegister就为显示页面了
//showLogin就为隐藏页面了
ToRegister(){
this.showRegister=true,
this.showLogin=false
},
// 跳转至登录页面，点击后注册页面就为隐藏页面
//登录页面就为显示页面了
ToLogin(){
this.showRegister=false,
this.showLogin=true
},
/**手机号码验证 */
RegisterphoneVerify(){
let regExp=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
this.registerphoneMessage='';
if(!regExp.test(this.phone)){
this.registerphoneMessage='手机格式不对'
}
}
}
},
来看下效果图吧
注册页面跳回登录仅为演示作用，可以自己进行改良，还可以添加获取验证码等功能
以上就是本篇文章的所有内容了，也可以进行改良 比如将注册页面可以封装成组件然后在Login页面进行组件调用等。欢迎大家来一起交流