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


Posted in Javascript onJuly 19, 2019

实现效果:

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

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

基于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输入密码显示与隐藏实现:

效果(点击显示与隐藏进行切换):

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

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

代码:

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

Javascript 相关文章推荐
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
Three.js快速入门教程
Sep 09 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 #Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 #Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 #Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 #Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 #Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 #Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 #Javascript
You might like
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
微信支付开发交易通知实例
2016/07/12 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
详解Vue依赖收集引发的问题
2019/04/22 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
python 函数传参之传值还是传引用的分析
2017/09/07 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Python谱减法语音降噪实例
2019/12/18 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
华为C++笔试题
2014/08/05 面试题
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
文秘大学生求职信
2014/02/25 职场文书
高级工程师英文求职信
2014/03/19 职场文书
面试必备的求职信
2014/05/25 职场文书
经典团队口号大全
2014/06/21 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
走进科学观后感
2015/06/18 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
浅谈redis整数集为什么不能降级
2021/07/25 Redis