本文给大家介绍vue实现登录、注册、退出、跳转功能，具体代码如下所示:

效果图1：

效果图2：

效果图3：

效果图4：

完整实例：

  
    
    
    
    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;
    	}
    
  
  
  	
  		
  			点击跳转{{n}}
  			
  			
	  			
欢迎体验
	  		
  		
  		
	  		
	  			
欢迎登录
	  			
		  			
		  			
请输入用户名
	  			
	  			
	  			
	  			
请输入密码
	  			
	  			登录
	  		
	  		
	  			我要注册
	  		
  		
  		
  			
	  			
注册界面，没写，哈哈
  			
  			
	  			我要登录
	  		
  		
  		
  			
	  			
登录成功
  			
  			
	  			退出登录
	  		
  		
		 
  
  
 		
		

到此这篇关于vue实现登录、注册、退出、跳转等功能的文章就介绍到这了,更多相关vue实现登录、注册、退出、跳转内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！