基于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 相关文章推荐
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
前端jquery部分很精彩
May 03 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
vue iview实现动态新增和删除
Jun 17 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
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 会话(session 时间设定)使用入门代码
2008/06/05 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
python实现弹窗祝福效果
2019/04/07 Python
python pygame实现五子棋小游戏
2020/10/26 Python
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
应用化学专业职业生涯规划书
2013/12/31 职场文书
中秋寄语大全
2014/04/11 职场文书
授权委托书公证
2014/09/14 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
详解Python 3.10 中的新功能和变化
2021/04/28 Python