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

来源：动视网责编：小采时间：2020-11-27 21:53:29

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

基于vue 实现表单中password输入的显示与隐藏功能:实现效果：点击眼睛的时候显示与隐藏代码： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <link href=css/bootstrap.min.css rel=external

推荐度：

点击下载本文 文档为doc格式

导读基于vue 实现表单中password输入的显示与隐藏功能:实现效果：点击眼睛的时候显示与隐藏代码： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <link href=css/bootstrap.min.css rel=external

实现效果：

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

代码：

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

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

推荐度：

点击下载本文 文档为doc格式

标签： VUE 隐藏 password

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐