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就執(zhí)行 倒計時函數
this.autoPlay();
}
})
</script>
</html>
到此這篇關于vue實現登錄、注冊、退出、跳轉等功能的文章就介紹到這了,更多相關vue實現登錄、注冊、退出、跳轉內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
彈窗效果是在Web開發(fā)中經常用到的一種交互效果,這篇文章主要給大家介紹了關于vue實現彈出框內嵌頁面展示并添加tab切換展示實時加載的相關資料,需要的朋友可以參考下2024-01-01
javascript中Set、Map、WeakSet、WeakMap區(qū)別
這篇文章主要介紹了javascript中Set、Map、WeakSet、WeakMap區(qū)別,需要的朋友可以參考下2022-12-12
本篇文章通過實例給大家分享了vue自動化表單的操作方法以及相關的代碼做了描述，有興趣的朋友可以跟著學習下。2018-05-05
vue深入解析之render function code詳解
vue對大家來說應該再熟悉不過了，下面這篇文章主要給大家深入的解析了vue之render function code的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要介紹了Vue組件實現卡片動畫倒計時示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
vue-cli如何關閉Uncaught?error的全屏提示
這篇文章主要介紹了vue-cli如何關閉Uncaught?error的全屏提示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了Vue 實現一個簡單的鼠標拖拽滾動效果插件，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
在本篇文章里小編給大家整理的是一篇關于vue中插槽整理及用法分析內容，對此有興趣的朋友們可以跟著學習下。2021-12-12
本文主要介紹了Vue簡化用戶查詢/添加功能的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
這篇文章主要介紹了vue a標簽點擊實現賦值方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09