vue实现登录、注册、退出、跳转等功能


Posted in Vue.js onDecember 23, 2020

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

效果图1:

vue实现登录、注册、退出、跳转等功能

效果图2:

vue实现登录、注册、退出、跳转等功能

效果图3:

vue实现登录、注册、退出、跳转等功能

效果图4:

vue实现登录、注册、退出、跳转等功能

完整实例:

<!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>

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

Vue.js 相关文章推荐
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 #Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 #Vue.js
详解Vue的异步更新实现原理
Dec 22 #Vue.js
Vue组件简易模拟实现购物车
Dec 21 #Vue.js
vue实现购物车的小练习
Dec 21 #Vue.js
Vue实现小购物车功能
Dec 21 #Vue.js
vue监听滚动事件的方法
Dec 21 #Vue.js
You might like
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
英文自我鉴定
2013/12/10 职场文书
股东协议书
2014/04/14 职场文书
公司募捐倡议书
2014/05/14 职场文书
食品安全承诺书
2014/05/22 职场文书
争做文明公民倡议书
2014/08/29 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python
详解vue中v-for的key唯一性
2021/05/15 Vue.js