使用vue实现登录弹出框 - 行业资讯 - 肥雀云

　　介绍

今天就跟大家聊聊有关使用vue实现登录弹出框,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

不多废话,直接上代码:

CSS:

*{保证金:0;填充:0;}/*登陆按钮*/#应用{ 　　宽度:140 px; 　　高度:36 px; 　　保证金:10 px汽车; 　　} 　　号登录,登录一个{# 　　宽度:200 px; 　　高度:38 px; 　　行高:38 px; 　　text-align:中心; 　　文字修饰:没有; 　　字体大小:24 px; 　　颜色:# 000; 　　}/*登陆框*/#登录框{ 　　填充:20 px; 　　显示:没有; 　　宽度:350 px; 　　身高:150 px; 　　背景:继续; 　　border - radius: 5 px; 　　位置:绝对的; 　　margin-left: -80 px; 　　margin-top: 150 px; 　　} 　　{# login-box>形式　　text-align:中心; 　　} 　　#{登录框标签　　显示:块; 　　字体大小:20 px; 　　保证金:10 px 0 0 0; 　　} 　　#登录框标签输入{ 　　宽度:200 px; 　　高度:30 px; 　　} 　　#{登录框按钮　　宽度:200 px; 　　高度:30 px; 　　保证金:10 px 0 0 0; 　　宽度:90 px; 　　border - radius: 5 px; 　　} 　　#{密切　　字体大小:18 px; 　　位置:绝对的; 　　上图:0; 　　右:5 px; 　　光标:指针; 　　}/*背景*/#{回来　　位置:绝对的; 　　左:0; 　　上图:0; 　　宽度:100%; 　　高度:100%; 　　背景:# 000; 　　透明度:0.5; 　　HTML:}

& lt; div id=癮pp"比; 　　& lt; !——登陆按钮——比; 　　& lt; h4 id=發ogin"v=癷sLogin==true"祝辞欢迎您| & lt; a href=癹avascript:“rel=巴獠縩ofollow"rel=巴獠縩ofollow"@click=發ogout"祝辞注销& lt;/a> & lt;/h4> 　　& lt; h4 id=發ogin"v-else> & lt; a href=癹avascript:“rel=巴獠縩ofollow"rel=巴獠縩ofollow"@click=發ogin1"祝辞登录& lt;/a>|注册& lt;/h4> 　　　　& lt; !——登陆框——比; 　　& lt; div id=發ogin-box":比; 　　action=& lt;形式““比; 　　& lt; label>用,,,,,,,,户: 　　& lt;输入v模型=皍name"类型=皌ext"占位符=扒胧淙胗没霸? 　　& lt;/label> 　　& lt; label>密,,,,,,,,码: 　　& lt;输入v模型=皍pwd"类型=皃assword"占位符=扒胧淙朊苈搿霸? 　　& lt;/label> 　　& lt;按钮类型=癰utton"@click=發ogin2"祝辞登录& lt;/button> 　　& lt; p id=癱lose"@click=癱lose"祝辞×& lt;/p> 　　& lt;/form> 　　& lt;/div> 　　　　& lt; !——背景半透明处理——比; 　　& lt; div id=癰ack":比;& lt;/div> 　　& lt;/div>

JS:

新Vue ({
　　埃尔:“# app"
　　数据:{
　　isLogin:假的,
　　日志:0,
　　uname:““,
　　upwd:“;”
　　},
　　方法:{
　　login1 () {
　　this.log=1;
　　},
　　login2 () {
　　如果(this.uname==癶ahaha",, this.upwd==?23456“) {
　　this.log=0;
　　this.isLogin=true;
　　其他}{
　　alert(“用户名或密码不正确!“);
　　}
　　},
　　close () {
　　this.log=0;//清空输入中的内容
　　this.uname=?“;
　　this.upwd=?“;
　　},
　　注销(){
　　this.isLogin=false;
　　this.uname=?“;
　　this.upwd=?“;
　　}
　　}
　　})

效果图如下:

使用vue实现登录弹出框