基于vue 实现表单中password输入的显示与隐藏功能

实现效果：

点击 “眼睛” 的时候显示与隐藏

代码：

  
  
  
  
  
    #main{
      text-align: center;
      margin-top:60px;
    }
    input[type=text],input[type=password]{
      width:260px;
      height:28px;
      display: inline-block;
    }
    span{
      margin-left:-30px;
      cursor: pointer;
    }
    input[type=checkbox]{
      cursor: pointer;
      opacity: 0;
      margin-left:-18px;
      display: inline-block;
    }
  



    
    
    
    


  
  

=====================================

登录页面input输入密码显示与隐藏实现：

效果（点击显示与隐藏进行切换）：

代码：

  
    
    
    
    
    
    
      body{
 background:white;
      }
      .main{
 padding-top:50px;width:95%;margin:0 auto;
      }
      .account{
 border-bottom:1px solid #dfdfdf;padding-top:28px;
      }
      .account input{
 border:none;font-size:14px;margin-bottom:5px;width:91.5%;height:44px;
      }
      .account i{
 width:14px;
 height:14px;
 line-height:14px;
 font-size:18px;
 display:inline-block;
 color:white;
 background:#cdcdcd;
 border-radius:50%;
 text-align:center;
 font-style:normal;
      }
      .account .psd{
 width:81.6%;
      }
      .account span{
 color:#bfbfbf;float:right;line-height:40px;
      }
    
  

  
    
      
 
   
   
   ×
   隐藏
   显示
 
      
    
    
  

总结

以上所述是小编给大家介绍的基于vue 实现表单中password输入的显示与隐藏功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！