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 相关文章推荐
Document 对象的常用方法
Jul 31 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
javascript每日必学之继承
Feb 23 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
js原生map实现的方法总结
Jan 19 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
让你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
ADODB的数据库封包程序库
2006/12/31 PHP
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
php 函数中使用static的说明
2012/06/01 PHP
自定义php类(查找/修改)xml文档
2013/03/26 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
JS中的BOM应用
2018/02/02 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
python获得文件创建时间和修改时间的方法
2015/06/30 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
Django 拆分model和view的实现方法
2019/08/16 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
员工年终演讲稿
2014/01/03 职场文书
设计专业自荐信
2014/06/19 职场文书
物流管理专业推荐信
2014/09/06 职场文书
教师工作态度自我评价
2015/03/05 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
python playwright之元素定位示例详解
2022/07/23 Python