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 29 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
JavaScript File分段上传
Mar 10 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 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
php结合飞信 免费天气预报短信
2009/05/07 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
PHP文件与目录操作示例
2016/12/24 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
JQuery toggle使用分析
2009/11/16 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
Python使用gRPC传输协议教程
2018/10/16 Python
python如何删除文件中重复的字段
2019/07/16 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
怎样声明接口
2014/09/19 面试题
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
1000字打架检讨书
2014/11/03 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android