不多废话，直接上代码：

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：

  
  
欢迎您 | 注销
  
登录 | 注册

  
  

   

    用    户:
     
    
    密    码:
     
    
    登录
    
×
   
  
  
  
  

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好方便。