vue 实现表单中password输入的显示与隐藏.
实现效果：
点击 “眼睛” 的时候显示与隐藏
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap.min.css" 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输入的显示与隐藏.的更多相关文章
- ext当表单中的输入项为必填时，输入项label后显示红色的*
form表单里,当输入项为必填项时,需要将对应item的allowblank属性设置为true,如果item的label后面自带红色的*,表单中哪些输入项是“必填”,哪些输入项是“非必填”,一眼望去清 ...
- Vue项目在表单中限制输入数字
<template> <div> <input v-model="userPhone" autofocus type="text" ...
- vue类似tab切换的效果，显示和隐藏的判断。
两者切换,动态显示对应的列表详情. 通过v-show的判断 数据驱动
- ExtJS4.2学习(17)表单基本输入控件Ext.form.Field（转）
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html --------------- ...
- VUE中登录密码显示与隐藏的最简设计——基于iview
目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 ...
- Ant-design-vue—— 表单输入框输入很卡问题
参考:https://blog.csdn.net/weixin_43905402/article/details/106074435 我的问题:vue项目中使用ant-design-vue,表单中输入 ...
- 在vue中下拉框切换事件中改新建表单中的一个值，页面不显示
事件中改新建表单中的一个值,页面不显示,当另一个对象值发生改变时,这个页面上的值才会显示 由于新建表单是弹窗,在弹出时会重新给每个字段重新赋值,在赋值时没给这个字段赋值(常见新加功能时,加了一个字段, ...
- 如何在启用SharePoint浏览器功能的InfoPath 表单中添加托管代码以动态地加载并显示图片
InfoPath 的浏览器表单不支持加载并显示图片,当然在模板中可以插入图片,但是如果想显示数据库的一幅图片,或是动态加载一张图片就无能为力了. 基实这个问题可以通过在浏览器表单中使用: " ...
- BarTender 2016表单中的“秤显示”控件
BarTender 2016中的表单是一个非常实用的工具,它可以实现数据输出提示,查询提示和同一表单的记录选择.这些都离开可供添加的控件,“秤显示”控件也是我们打印尝尝需要涉及的,今天我们就来看看什么 ...
随机推荐
- linux下scsi共享磁盘的简单搭建
linux下scsi共享磁盘的简单搭建 Scsi 共享磁盘需要我先有空余的分区,或者可以在虚拟机里面添加一块磁盘,安装所需的软件我在虚拟机里面添加了一块硬盘,分了一个主分区,sdb1 1G,将这个用s ...
- C调用C++接口
在cpp头文件里面声明函数 #ifndef _HEAD_ #define _HEAD_ #ifdef __cplusplus extern "C" { #endif #define ...
- 数字图像处理实验（8）：PROJECT 04-04，Highpass Filtering Using a Lowpass Image 标签： 图像处理MATLAB 2017-05-25 0
实验要求: 高通滤波器可以通过1减去低通滤波器的传递函数得到. 使用公式 计算可以的得到 . 实验代码: % PROJECT 04-04 Highpass Filtering Using a Lowp ...
- Ajax步骤
var request = new XMLHttpRequest(); request.open("GET","get.php",ture); request. ...
- ASP.NET MVC5 Authentication Filters执行链
注意区分认证和授权: The following are the differences in short: Authentication(认证): It is a process of verif ...
- Java IO流的回顾与梳理（必记必会必写）
- MVC - Model - Controller - View
一. Model 1.1 在ASP.NET MVC 中 model 负责的是所有与 "数据“ 相关的的任务. 也可以把Model 看成是 ASP.NET 中三层模式的 BLL层 加 DA ...
- 以太坊系列之十七: 使用web3进行合约部署调用以及监听
以太坊系列之十七: 使用web3进行智能合约的部署调用以及监听事件(Event) 上一篇介绍了使用golang进行智能合约的部署以及调用,但是使用go语言最大的一个问题是没法持续监听事件的发生. 比如 ...
- mysql 按照姓氏排序
1.如果是gbk存储 order by name asc 2.非GBK order by convert(name using gbk) asc
- C# 根据论文 像素差异算法【个人实验还是比较好使的】
论文地址:http://www.docin.com/p-1081596986.html 具体代码: 我转YUV,再通过上面的论文的方式比较近. YVU 介绍:https://blog.csdn.net ...