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

 更新时间:2019年07月19日 16:47:54   作者:rachelch  
这篇文章主要介绍了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输入的显示与隐藏功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • vue 判断页面是首次进入还是再次刷新的实例

    vue 判断页面是首次进入还是再次刷新的实例

    这篇文章主要介绍了vue 判断页面是首次进入还是再次刷新的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 详解vue静态资源打包中的坑与解决方案

    详解vue静态资源打包中的坑与解决方案

    本篇文章主要介绍了详解vue静态资源打包中的坑与解决方案,本文主要解决路径问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • vue动态绑定组件子父组件多表单验证功能的实现代码

    vue动态绑定组件子父组件多表单验证功能的实现代码

    这篇文章主要介绍了vue动态绑定组件子父组件多表单验证功能的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-05-05
  • vue滚动tab跟随切换效果

    vue滚动tab跟随切换效果

    这篇文章主要为大家详细介绍了vue滚动tab跟随切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • vue.js实现仿原生ios时间选择组件实例代码

    vue.js实现仿原生ios时间选择组件实例代码

    本篇文章主要介绍了vue.js实现仿原生ios时间选择组件实例代码,具有一定的参考价值,有兴趣的可以了解一下。
    2016-12-12
  • Vue虚拟Dom到真实Dom的转换

    Vue虚拟Dom到真实Dom的转换

    本文主要介绍了Vue虚拟Dom到真实Dom的转换,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • Vue键盘事件用法总结

    Vue键盘事件用法总结

    本篇文章主要介绍了Vue键盘事件用法总结,详细的介绍了各种键盘事件的用法,有兴趣的可以了解一下
    2017-04-04
  • Vuex 单状态库与多模块状态库详解

    Vuex 单状态库与多模块状态库详解

    这篇文章主要介绍了Vuex 单状态库与多模块状态库详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • Vant 中的Toast设置全局的延迟时间操作

    Vant 中的Toast设置全局的延迟时间操作

    这篇文章主要介绍了Vant 中的Toast设置全局的延迟时间操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 在Vue中使用Echarts实例图的方法实例

    在Vue中使用Echarts实例图的方法实例

    这篇文章主要给大家介绍了关于如何在Vue中使用Echarts实例图的相关资料,文中介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10

最新评论