基于vue 实现表单中password输入的显示与隐藏功能
2019-07-19 16:47
1586 查看
实现效果:
点击 “眼睛” 的时候显示与隐藏
代码:
<!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输入的显示与隐藏功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- jQuery基于闭包实现的显示与隐藏div功能示例
- 基于JS实现密码框(password)中显示文字提示功能代码
- 基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
- vue实现密码显示隐藏切换功能
- 基于JavaScript实现表单密码的隐藏和显示出来
- 基于JavaScript实现表单密码的隐藏和显示出来
- vue实现密码显示与隐藏按钮的自定义组件功能
- 基于JavaScript实现表单密码的隐藏和显示出来
- vue.js使用v-if实现显示与隐藏功能示例
- vue复合组件实现注册表单功能
- vue表单中遍历表单中操作按钮的显示隐藏
- Android基于高德地图实现搜索框的自动输入提示功能
- 【Android】实现动态显示隐藏密码输入框的内容
- 安卓滑动隐藏显示菜单功能实现(还有蒙板校果),只显示一半view
- MFC基于对话框的Media Player如何实现全屏显示功能?
- 基于Struts2框架实现登录案例 之 使用Struts2标签库简化表单+继承ActionSupport完成输入交验
- vc6实现魔兽3显示敌对单位,以及去迷雾,显示隐藏单位等功能
- vue项目实现表单登录页保存账号和密码到cookie功能
- 基于vue-simplemde实现图片拖拽、粘贴功能
- Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作