vue实现登录、注册、退出、跳转等功能
更新时间：2020年12月23日 11:08:11 作者：学习永远不会晚
这篇文章主要介绍了vue实现登录、注册、退出、跳转等功能,需要的朋友可以参考下
本文给大家介绍vue实现登录、注册、退出、跳转功能，具体代码如下所示:
效果图1：
效果图2：
效果图3：
效果图4：
完整实例：
<!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实现登录、注册、退出、跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。这篇文章主要介绍了vue中使用sessionStorage记住密码功能,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了vue3项目使用样式穿透修改elementUI默认样式,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了VUE中如何实现阻止事件冒泡，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Vue+Element-UI中el-table动态合并单元格:span-method方法代码详解
el-table是element-ui提供的表格组件,可以用于展示和操作数据,这篇文章主要给大家介绍了关于Vue+Element-UI中el-table动态合并单元格:span-method方法的相关资料,需要的朋友可以参考下2023-09-09
Vue3使用Suspense优雅地处理异步组件加载的示例代码
Vue3是Vue.js的最新版本,它带来了许多令人兴奋的新特性和改进,其中一个重要的特性是Suspense,它为我们提供了一种优雅地处理异步组件加载和错误处理的方式,本文给大家介绍了Vue3使用Suspense优雅地处理异步组件加载的示例,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了Vue 组件如何模块化抽离Props的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
Vue+Openlayer中使用select选择要素的实现代码
本文通过实例代码给大家介绍Vue+Openlayer中使用select选择要素，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-08-08
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js，是一个第三方插件，第三方异步请求工具库，这篇文章主要介绍了Axios在vue项目中的封装方法,需要的朋友可以参考下2022-10-10
这篇文章主要给大家分享的是vue项目实现页面跳转的方法，vue-router是前端开发中用来实现路由页面跳转的一个模块。下面小编将带来如何在已经创建好的vue-router项目基础下实现页面跳转,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了Vue CLI3 如何支持less的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论