vue实现登录、注册、退出、跳转等功能，简单实用

比眉伴天荒 2021-07-25 00:24 667阅读 0赞

**目录**

效果图1：

效果图2：

效果图3：

效果图4：

完整实例：

--------------------

# 效果图1： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

# 效果图2： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1][]

# 效果图3： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2][]

# 效果图4： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 3][]

# 完整实例： #

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="GBK">
            <title></title>
            <style>
            ul li {
    
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #app {
                width: 600px;
                height: 400px;
                margin: 0 auto;
                border: 1px solid #ccc;
            }
            .title{
            	text-align:center;
            }
            .tab-tilte{
                width: 99%;
            }
            .tab-tilte li{
                float: left;
                width: 31%;
                padding: 10px 0;
                text-align: center;
                background-color:#f4f4f4;
                cursor: pointer;
            }
         /* 点击对应的标题添加对应的背景颜色 */
            .tab-tilte .active{
                background-color: #09f;
                color: #fff;
            }
            .tab-content div{
                float: left;
                width: 25%;
                line-height: 100px;
                text-align: center;
            }
            .sider_icon{
    				display: inline-block;
    				width:36px;
    				height:40px;
    				line-height:36px;
    				font-size:20px;
    				text-align:center;
    				color:#fff;
    				background: url(../images/bubble.png) 0 0 no-repeat;
    				top:-20px;
    			}
            	.contentli{
            		float: left;
    	            padding: 10px 0;
    	            text-align: center;
            	}
            	.input{
            		float: left;
            		width: 60%;
            		margin-left:20%;
    	            padding: 10px 0;
    	            align:center;
            	}
            	.btn{
            		float: left;
    	            width: 20%;
    	            margin-left:60%;
    	            padding: 10px 1px;
    	            text-align: center;
            	}
            	.guanggao{
            		float:right;
            		padding-right:10px;
            		cursor:pointer;
            	}
            	#bottomDiv{
            		float: left;
    	            margin-left:40%;
    	            padding: 10px 10px;
    	            text-align: center;
            	}
            	#bottomDiv a{
            			 padding: 1px 10px;
            			 cursor:pointer;
            			 border-bottom:1px solid red;
            	}
            </style>
        </head>
        <body>
        	<div id="app" >
        		<div v-show='page==="advert"'>
        			<span class='guanggao' @click='goLogin'>点击跳转<b>{
       {n}}</b></span>
        			
        			<div id='bottomDiv'>
    	    			<h1 class='title'>欢迎体验</h1>
    	    		</div>
        		</div>
        		<div v-show='page==="login"'>
    	    		<div>
    	    			<h1 class='title'>欢迎登录</h1>
    	    			<div>
    		    			<input type="text" v-model='name' class="input" placeholder='请输入用户名'>
    		    			<p v-show='!name'>请输入用户名</p>
    	    			</div>
    	    			<div>
    	    			<input type="text" v-model='pwd' class="input" placeholder='请输入密码'>
    	    			<p v-show='!pwd'>请输入密码</p>
    	    			</div>
    	    			<button  @click="add" :disabled="!name||!pwd" class='btn'>登录</button>
    	    		</div>
    	    		<div id='bottomDiv'>
    	    			<a @click="goRegister">我要注册</a>
    	    		</div>
        		</div>
        		<div v-show='page==="register"'>
        			<div>
    	    			<h1 class='title'>注册界面，没写，哈哈</h1>
        			</div>
        			<div id='bottomDiv'>
    	    			<a @click="goLogin">我要登录</a>
    	    		</div>
        		</div>
        		<div v-show='page==="suc"'>
        			<div>
    	    			<h1 class='title'>登录成功</h1>
        			</div>
        			<div id='bottomDiv'>
    	    			<a @click="exit">退出登录</a>
    	    		</div>
        		</div>
    		</div> 
        </body>
        <script src="vue.js"></script>
     	<script>
              new Vue({
                el:'#app',
                data:{
                	page:'advert',//默认是倒计时的显示广告 login/register 分别表示登录、注册
                	n:5,
                	intervalId:'',
                	name:'',
                	pwd:''
                },
                methods:{
                	autoPlay:function(){
                		//自动进行到计时
                		this.intervalId=setInterval(()=>{
                			if(this.n===0){//当倒计时为0的时候，跳转登录界面，并清除定时器
    	            			this.page='login';//设置page为login
    	            			clearInterval(this.intervalId);
    	            			return ;
    	            		}
    	            		this.n--;
                		},1000);
                	},
                	goLogin:function(){//点击到登录界面
                		this.page='login';//设置page为login
                		clearInterval(this.intervalId);
                	},
                	add:function(){
                		//控制跳转到成功
                		this.page='suc';
                	},
                	goRegister:function(){
                		//控制跳转到注册
                		this.page='register';
                		this.name=this.pwd='';
                	},
                	exit:function(){
                		//控制跳转到登录
                		this.page='login';
                		this.name=this.pwd='';
                	}	
                },
                computed:{
                	
                },
                mounted:function(){
                	//生命周期 mounted就执行 倒计时函数
                	this.autoPlay();
                }
            })
     	</script>	
    		
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/67f55ce730bc4aad8975ccf6405bfa3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1]: /images/20210724/8588efbcc41e4760a69344e28a20b736.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2]: /images/20210724/b231c1c8fd6846ba8efc0a722d915ea8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 3]: /images/20210724/361cf275abd44939a3805879570b2402.png