vue实现登录、注册、退出、跳转等功能

2022-01-13,,,,

这篇文章主要介绍了vue实现登录注册退出跳转等功能,需要的朋友可以参考下

本文给大家介绍vue实现登录、注册、退出、跳转功能,具体代码如下所示:

效果图1:

效果图2:

效果图3:

效果图4:

完整实例:

    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-600) 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; }    点击跳转{{n}} 

欢迎体验

欢迎登录

请输入用户名

请输入密码

我要注册

注册界面,没写,哈哈

我要登录

登录成功

退出登录

到此这篇关于vue实现登录、注册、退出、跳转等功能的文章就介绍到这了,更多相关vue实现登录、注册、退出、跳转内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

以上就是vue实现登录、注册、退出、跳转等功能的详细内容,更多请关注本站其它相关文章!

《vue实现登录、注册、退出、跳转等功能.doc》

下载本文的Word格式文档,以方便收藏与打印。