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项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
vue router 动态路由清除方式
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
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
理解Python中的With语句
2015/02/02 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
python reverse反转部分数组的实例
2018/12/13 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
上海方立数码笔试题
2013/10/18 面试题
database面试题
2013/03/28 面试题
广告设计应届生求职信
2014/03/01 职场文书
中学生运动会广播稿
2015/08/19 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js
MySQL 逻辑备份 into outfile
2022/05/15 MySQL