使用vue实现登录弹出框

发布时间：2020-10-28 02:30:04 作者：Leah
来源：亿速云阅读：718

今天就跟大家聊聊有关使用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">
  <!--登陆按钮-->
  <h4 id="login" v-if="isLogin==true">欢迎您 | <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="logout">注销</a></h4>
  <h4 id="login" v-else><a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="login1">登录</a> | 注册</h4>

  <!--登陆框 -->
  <div id="login-box" :>
   <form action="">
    <label>用&nbsp;&nbsp;&nbsp;&nbsp;户:
     <input v-model="uname" type="text" placeholder="请输入用户名...">
    </label>
    <label>密&nbsp;&nbsp;&nbsp;&nbsp;码:
     <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" :></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实现登录弹出框

相关阅读