vue 退出登录,vue实现注册与登录功能
这篇文章主要介绍了某视频剪辑软件实现登录、注册、退出、跳转等功能，需要的朋友可以参考下
本文给大家介绍某视频剪辑软件实现登录、注册、退出、跳转功能，具体代码如下所示：
效果图1:
效果图2:
效果图3:
效果图4:
完整实例：
！声明文档类型
超文本标记语言
头
meta charset=GBK
标题/标题
风格
ul li {
边距：0;
填充：0;
列表样式：无；
}
#app {
宽度：600像素
高度：400像素
边距：0自动；
边框：1px纯色# ccc
}。标题{
文本对齐：居中；
}。标签-倾斜{
宽度：99%;
}。标签-倾斜李{
浮动：左；
宽度：31%;
填充：10px 0；
文本对齐：居中；
背景色：# f4f4f4
光标：指针；
}
/* 点击对应的标题添加对应的背景颜色*/。标签倾斜。活动{
背景色：# 09f
颜色：# fff
}。选项卡-内容部分{
浮动：左；
宽度：25%;
行高：100像素
文本对齐：居中；
}。侧面_图标{
显示：内嵌-块；
宽度：36px
高度：40px
行高：36px
字体大小：20px
文本对齐：居中；
颜色：# fff
背景：网址（./images/bubble.png) 0 0不重复；
top:-20px；
}。contentli{
浮动：左；
填充：10px 0；
文本对齐：居中；
}。输入{
浮动：左；
宽度：60%;
左边距：20%;
填充：10px 0；
对齐：居中；
}。btn{
浮动：左；
宽度：20%;
左边距：60%;
填充：10px 1px
文本对齐：居中；
}。高光{
浮动：对；
右填充：10px
光标：指针；
}
#bottomDiv{
浮动：左；
左边距：40%;
填充：10px 10px
文本对齐：居中；
}
#bottomDiv a{
填充：1px 10px
光标：指针；
边框-底部：1px纯红；
}
/风格
/头
身体
div id=应用程序
div v-show=page===advert
"高光"点击跳转b{{n}}/b/span
div id=bottomDiv
h1 class=title 欢迎体验/h1
/div
/div
div v-show=page===login
差异
h1 class=title 欢迎登录/h1
差异
input type= text v-model= name class= input placeholder=请输入用户名
p v-show=！名称请输入用户名/p
/div
差异
输入类型= text v-model= pwd class= input placeholder=请输入密码
p v-show=！密码请输入密码/p
/div
button @click=add :disabled=！名字!pwd class=btn 登录/按钮
/div
div id=bottomDiv
一个@click=goRegister 我要注册/a
/div
/div
div v-show=page===注册
差异
h1 class=title 注册界面，没写，哈哈/h1
/div
div id=bottomDiv
一个@click=goLogin 我要登录/a
/div
/div
div v-show=page===suc
差异
h1 class=title 登录成功/h1
/div
div id=bottomDiv
a @click=exit 退出登录/a
/div
/div
/div
/body
脚本src= vue。js /脚本
脚本
新Vue({
埃尔： #app ，
数据：{
页面：广告,//默认是倒计时的显示广告登录/注册分别表示登录、注册
n:5，
有效间隔：,
名称：,
密码：""
},
方法：{
autoPlay:function(){
//自动进行到计时
这个。intervalid=setInterval(()={
if(this.n===0){//当倒计时为0的时候，跳转登录界面，并清除定时器
this.page= login//设置页，面，张，版为注册
清除间隔(这个。intervalid)；
返回；
}
这个。n-；
},1000);
},
goLogin:function(){//点击到登录界面
this.page= login//设置页，面，张，版为注册
清除间隔(这个。intervalid)；
},
add:function(){
//控制跳转到成功
this.page= suc
},
goRegister:function(){
//控制跳转到注册
this.page=注册
这个。名字=这个。pwd=
},
退出：函数(){
//控制跳转到登录
this.page= login
this . name=this . pwd=“”；
}
},
计算值：{
},
已安装：函数(){
//挂载的生命周期执行倒计时功能。
this . autoplay()；
}
})
/脚本
/html
关于vue的登录、注册、注销、跳转等功能的这篇文章到此为止。更多关于vue的登录、注册、注销、跳转的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。