使用vue實(shí)現(xiàn)登錄彈出框

發(fā)布時(shí)間：2020-10-28 02:30:04 來(lái)源：億速云閱讀：686 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

今天就跟大家聊聊有關(guān)使用vue實(shí)現(xiàn)登錄彈出框，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

不多廢話(huà)，直接上代碼：

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">注銷(xiāo)</a></h4>
  <h4 id="login" v-else><a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="login1">登錄</a> | 注冊(cè)</h4>

  <!--登陸框 -->
  <div id="login-box" :>
   <form action="">
    <label>用&nbsp;&nbsp;&nbsp;&nbsp;戶(hù):
     <input v-model="uname" type="text" placeholder="請(qǐng)輸入用戶(hù)名...">
    </label>
    <label>密&nbsp;&nbsp;&nbsp;&nbsp;碼:
     <input v-model="upwd" type="password" placeholder="請(qǐng)輸入密碼...">
    </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("用戶(hù)名或密碼不正確！");
   }
  },
  close(){
   this.log=0;
   //清空input中的內(nèi)容
   this.uname="";
   this.upwd="";
  },
  logout(){
   this.isLogin=false;
   this.uname="";
   this.upwd="";
  }
 }
})

效果圖如下：

使用vue實(shí)現(xiàn)登錄彈出框

正在學(xué)如何用vue與后臺(tái)連接，所以本例中的用戶(hù)名密碼都是寫(xiě)死的，只是為了實(shí)現(xiàn)這個(gè)功能，進(jìn)入實(shí)際運(yùn)用還需改進(jìn)。

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

看完上述內(nèi)容，你們對(duì)使用vue實(shí)現(xiàn)登錄彈出框有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問(wèn)一下細(xì)節(jié)

使用vue實(shí)現(xiàn)登錄彈出框

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽