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

2019-11-19 11:09:40

字体：大中小

来源：转载

供稿：网友

实现效果：

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

代码：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">  <script src="js/vue.js"></script>  <title>Title</title>  <style>    #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;    }  </style></head><body><div id="main">    <input type="text" class="form-control" v-model="msg" v-if="checked">    <input type="password" class="form-control" v-model="msg" v-else>    <span class="glyphicon glyphicon-eye-open"></span>    <input type="checkbox"  v-model="checked"></div><script>  new Vue({    el:"#main",    data:{      msg:"",      checked:false    },    methods:{    }  });</script>  <script src="js/jquery.min.js"></script>  <script src="js/bootstrap.min.js"></script></body></html>

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

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

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

代码：

<!doctype html><html>  <head>    <meta charset="UTF-8">    <title></title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <script src="js/vue.js"></script>    <script src="js/vue-resource.js"></script>    <style>      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;      }    </style>  </head>  <body>    <div id="login">      <div class="main">        <div class="account">          <input type="password" placeholder="密码" class="psd" v-model="psd" v-if="ifDisplay"/>          <input type="text" placeholder="密码" class="psd" v-model="psd" v-else/>          <i v-show="psd" @click="clearPassword()">×</i>          <span v-show="ifDisplay" @click="ifDisplay=!ifDisplay">隐藏</span>          <span v-show="!ifDisplay" @click="ifDisplay=!ifDisplay">显示</span>        </div>      </div>    </div>    <script type="text/javascript">      var vm=new Vue({        el:'#login',        data:{          username:'',          psd:'',          ifDisplay:false,        },        methods:{          clearPassword:function(){            this.psd='';          },        }      })    </script>  </body></html>

总结

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

上一篇：微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能

下一篇：el-input 标签中密码的显示和隐藏功能的实例代码