vue实现简单的登录弹出框


Posted in Javascript onOctober 26, 2020

本文实例为大家分享了vue实现简单的登录弹出框的具体代码,供大家参考,具体内容如下

初学vue框架,小小的写了一个登录弹出框效果

各路大佬多多指教。

不多废话,直接上代码:

CSS:

*{margin:0;padding:0;}
 /*登陆按钮*/
 #app{
 width:140px;
 height:36px;
 margin:10px auto;
 }
 #login,#login a{
 width: 200px;
 height: 38px;
 line-height:38px;
 text-align: center;
 text-decoration: none;
 font-size: 24px; 
 color: #000;
 }

 /*登陆框*/
 #login-box{
 padding: 20px;
 display:none;
 width:350px;
 height: 150px;
 background: #eeeeee;
 border-radius: 5px;
 position: absolute;
 margin-left: -80px;
 margin-top: 150px;
 }
 #login-box>form{
 text-align: center;
 }
 #login-box label{
 display: block;
 font-size: 20px;
 margin: 10px 0 0 0;
 }
 #login-box label input{
 width:200px;
 height: 30px;
 }
 #login-box button{
 width:200px;
 height: 30px;
 margin:10px 0 0 0;
 width:90px;
 border-radius: 5px;
 }
 #close{
 font-size:18px;
 position: absolute;
 top:0;
 right: 5px;
 cursor: pointer;
 }
 /*背景*/
 #back{
 position:absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
 background: #000;
 opacity: 0.5;
}

HTML:

<div id="app">
 <!--登陆按钮-->
 <h3 id="login" v-if="isLogin==true">欢迎您 | <a href="javascript:;" @click="logout">注销</a></h3>
 <h3 id="login" v-else><a href="javascript:;" @click="login1">登录</a> | 注册</h3>

 <!--登陆框 -->
 <div id="login-box" :style="log==0?'display:none':'display:block;zIndex:1'">
 <form action="">
 <label>用    户:
  <input v-model="uname" type="text" placeholder="请输入用户名...">
 </label>
 <label>密    码:
  <input v-model="upwd" type="password" placeholder="请输入密码...">
 </label>
 <button type="button" @click="login2">登录</button>
 <p id="close" @click="close">×</p>
 </form>
 </div>
 
 <!--背景半透明处理-->
 <div id="back" :style="log==0?'display:none':'display:block'"></div>
</div>

JS:

new Vue({
 el:"#app",
 data:{
 isLogin:false,
 log:0,
 uname:"",
 upwd:""
 },
 methods:{
 login1(){
 this.log=1;
 },
 login2(){
 if(this.uname=="hahaha"&&this.upwd=="123456"){
 this.log=0;
 this.isLogin=true;
 }else{
 alert("用户名或密码不正确!");
 }
 },
 close(){
 this.log=0;
 //清空input中的内容
 this.uname="";
 this.upwd="";
 },
 logout(){
 this.isLogin=false;
 this.uname="";
 this.upwd="";
 }
 }
})

效果图如下:

vue实现简单的登录弹出框

vue实现简单的登录弹出框

vue实现简单的登录弹出框

正在学如何用vue与后台连接,所以本例中的用户名密码都是写死的,只是为了实现这个功能,进入实际运用还需改进。

小小地感叹一下vue好方便。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
详解layui中的树形关于取值传值问题
Jan 16 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
让你30分钟快速掌握vue3教程
Oct 26 #Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 #Javascript
vue3+typescript实现图片懒加载插件
Oct 26 #Javascript
原生js实现简单轮播图
Oct 26 #Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 #Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 #Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 #Javascript
You might like
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
Python 元类使用说明
2009/12/18 Python
利用Python实现图书超期提醒
2016/08/02 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
Python中str.join()简单用法示例
2018/03/20 Python
python web基础之加载静态文件实例
2018/03/20 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Python中logging实例讲解
2019/01/17 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
Django xadmin安装及使用详解
2020/10/26 Python
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
旷课检讨书大全
2014/01/21 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
投资意向协议书
2015/01/29 职场文书
工程部文员岗位职责
2015/02/04 职场文书
python数字图像处理:图像简单滤波
2022/06/28 Python