基于vue 实现表单中password输入的显示与隐藏功能-偶像资源网

实现效果：

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

代码：

<!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输入的显示与隐藏功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

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

请登录后发表评论