1、vue實(shí)現(xiàn)登錄、注冊、退出、跳轉(zhuǎn)等功能本文給大家介紹vue實(shí)現(xiàn)登錄、注冊、退出、跳轉(zhuǎn)功能，具體代碼如下所示效果圖效果圖效果圖admin123213效果圖4：完整實(shí)例:vhtmlvheadvmetacharset=GBKvtitlev/titleullimargin:0;padding:0;list-style:none;#appwidth:600px;height:400px;margin:0auto;border:1pxsolid#ccc;.titletext-align:center;歡迎登錄我要注朋登錄成功退出登錄登錄.tab-tiltewidth:99%;.tab-tilteliflo

2、at:left;width:31%;padding:10px0;text-align:center;background-color:#f4f4f4;cursor:pointer;/*點(diǎn)擊對應(yīng)的標(biāo)題添加對應(yīng)的背景顏色*/.tab-tilte.activebackground-color:#09f;color:#fff;.tab-contentdivfloat:left;width:25%;line-height:100px;text-align:center;.sider_icondisplay:inline-block;width:36px;height:40px;line-height:3

3、6px;font-size:20px;text-align:center;color:#fff;background:url(./images/bubble.png)00no-repeat;top:-20px;.contentlifloat:left;padding:10px0;text-align:center;.inputfloat:left;width:60%;margin-left:20%;padding:10px0;align:center;.btnfloat:left;width:20%;margin-left:60%;padding:10px1px;text-align:cent

4、er;.guanggaofloat:right;padding-right:10px;cursor:pointer;#bottomDivfloat:left;margin-left:40%;padding:10px10px;text-align:center;#bottomDivapadding:1px10px;cursor:pointer;border-bottom:1pxsolidred;vspanclass=guanggaoclick=goLogin點(diǎn)擊跳轉(zhuǎn)vbnv/bv/span歡迎體驗(yàn)v/h1歡迎登錄v/h1vinputtype=textv-model=nameclass=input

5、placeholde請輸入用戶名請輸入用戶名v/divvdiv請輸入密碼v/divbuttonclick=add:disabled=!name|!pwdclass=btn登錄v/divvdivid=bottomDiv我要注冊v/divv/divvdivv-show=page=registervdiv注冊界面，沒寫，哈哈v/divvdivid=bottomDiv我要登錄v/divv/divvdivv-show=page=sucvdiv登錄成功v/divvdivid=bottomDiv退出登錄v/divv/divv/divv/bodyvscriptsrc=vue.jsv/scriptvscript

6、newVue(el:#app,data:page:advert,默認(rèn)是倒計(jì)時的顯示廣告login/register分別表示登錄、注冊n:5,intervalId:,name:,pwd:,methods:autoPlay:function()自動進(jìn)行到計(jì)時ervalId=setInterval()=if(this.n=0)/當(dāng)?shù)褂?jì)時為0的時候，跳轉(zhuǎn)登錄界面，并清除定時器this.page=login;/設(shè)置page為loginclearInterval(ervalId);return;this.n-;,1000);,goLogin:function()/點(diǎn)擊到登錄界面this.page=login;/設(shè)置page為loginclearInterval(ervalId);,add:function()/控制跳轉(zhuǎn)到成功this.page=suc;,goRegister:function()/控制跳轉(zhuǎn)到注冊this.page=register;=this.pwd=;,exit:function()/控制跳轉(zhuǎn)到登錄this.page=login;=this.pwd=;,computed:,mounted:function()生命周期mounted就執(zhí)行