没有合适的资源?快使用搜索试试~ 我知道了~
基于vue 实现表单中password输入的显示与隐藏功能
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
4 下载量 150 浏览量
2020-12-02
15:41:25
上传
评论
收藏 41KB PDF 举报
温馨提示
试读
3页
实现效果: 点击 “眼睛” 的时候显示与隐藏 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> [removed][removed] <title>Title</title> <style> #main{ text-align: center; margin-top:60p
资源推荐
资源详情
资源评论
基于基于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输入密码显示与隐藏实现:
效果(点击显示与隐藏进行切换):
资源评论
weixin_38530202
- 粉丝: 2
- 资源: 876
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功