基于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 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
vue.js实现图书管理功能
Sep 24 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
php实现的双向队列类实例
2014/09/24 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
js window.event对象详尽解析
2009/02/17 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
vue实现日历备忘录功能
2020/09/24 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
python单例模式实例分析
2015/04/08 Python
python ansible服务及剧本编写
2017/12/29 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
python将list转为matrix的方法
2018/12/12 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
Python下简易的单例模式详解
2019/04/08 Python
简单了解python变量的作用域
2019/07/30 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
python高级特性简介
2020/08/13 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
工作个人的自我评价
2014/01/14 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
同志主要表现材料
2014/08/21 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
现实表现材料范文
2014/12/23 职场文书
计划生育责任书
2015/05/09 职场文书
军训新闻稿范文
2015/07/17 职场文书