基于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 相关文章推荐
Jquery操作radio的简单实例
Jan 06 Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
浅谈vue中.vue文件解析流程
Apr 24 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
vue中template的三种写法示例
Oct 21 Javascript
JavaScript中的Proxy对象
Nov 27 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+jQuery实现自动补全功能源码
2013/05/15 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
express 项目分层实践详解
2018/12/10 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
Python笔记之工厂模式
2019/11/20 Python
python模拟实现斗地主发牌
2020/01/07 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
《圆明园的毁灭》教学反思
2014/02/28 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
高中历史教学反思
2016/02/19 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
java设计模式--七大原则详解
2021/07/21 Java/Android
详解Golang如何优雅的终止一个服务
2022/03/21 Golang