效果图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为loginclearInterval(this.intervalId);return ;}this.n--;},1000);},goLogin:function(){//点击到登录界面this.page='login';//设置page为loginclearInterval(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实现登录、注册、退出、跳转等功能，简单实用相关推荐

实验1：用户的登录与退出、IO重定向与简单文件操作
实验1:用户的登录与退出.IO重定向与简单文件操作 1.实验目的 (1).掌握系统开启和关闭的方法及正常关闭系统的意义和必要性: (2).掌握用户的登录与退出的方法及用户退出系统或注销的意义和必要性: ...
这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）...
其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这 ...
Vue实现登录注册功能
1.效果展示 2.注意:vue登录注册用到了 Vuex + localstorage+router等,使用了vue2,创建项目 3.先是在router中的index.js中写路由配置 import V ...
vue+elementui 登录注册页面实现
1.实现效果 2. 代码实现 2.1使用elementUI文档中Tabs标签页 2.2在components中新建两个文件 login.vue register.vue ...
AndroidStudio登录注册界面跳转
这里写目录标题 1.登录界面编写 1.1顶部图片 1.2账号提示+输入框 1.3密码提示+输入框 1.4记住密码+自动登录+插图 1.5登录按钮 1.6 还没有账号提示 1.7加一些文本信息 2.注册 ...
Thinkphp整合ucenter同步登录注册退出
Thinkphp整合ucenter完全可以双向同步登陆.退出.删用户.自动激活DZX用户.发消失.推动态.改密码等的. ucente同步登陆演试,比如把下面的代码放到你网站的登陆控制器里 $uc = ...
javaWeb实现登录注册的增删改查功能
1.包结构 2.数据库表字段数据库名:MyDB 表名:acca 字段: id int name varchar(64) pwd varchar(64) 3.工具类DBUtil public clas ...
SSM实现登录注册和邮件激活的功能，并发布到阿里云服务器
此文章也发在了我的博客园
基于Spring Boot+Vue的博客系统 16——热门文章功能简单的实现
废弃说明: 这个专栏的文章本意是记录笔者第一次搭建博客的过程,文章里里有很多地方的写法都不太恰当,现在已经废弃,关于SpringBoot + Vue 博客系列,笔者重新写了这个系列的文章,不敢说写的好 ...
Vue登录注册，并保持登录状态
关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法. 项目中有一 ...

vue实现登录、注册、退出、跳转等功能，简单实用

效果图1：

效果图2：

效果图3：

效果图4：

完整实例：

vue实现登录、注册、退出、跳转等功能，简单实用相关推荐

最新文章

热门文章