el-input 标签中密码的显示和隐藏
效果展示:
密码隐藏:

密码显示:

代码展示:
一:<el-input>标签代码
<el-form-item label="密码" prop="password">
<el-input :type="passw" v-model="adduser.password" style="width: 300px;" >
<%-- input中加图标必须要有slot="suffix"属性,不然无法显示图标 --%>
<i slot="suffix" :class="icon" @click="showPass"></i>
</el-input>
</el-form-item>
二:<script type="text/javascript">中代码
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
users:[],
total:100,
pageSize:5,
pageNum:1,
//用于显示或隐藏添加修改表单
add:false,
//用于改变Input类型
passw:"password",
//用于更换Input中的图标
icon:"el-input__icon el-icon-view",
adduser:{
id:null,
name:null,
password:null,
dept_id:null
},
},
methods:{
//密码的隐藏和显示
showPass(){
//点击图标是密码隐藏或显示
if( this.passw=="text"){
this.passw="password";
//更换图标
this.icon="el-input__icon el-icon-view";
}else {
this.passw="text";
this.icon="el-input__icon el-icon-loading";
};
}
},
})
</script>
el-input 标签中密码的显示和隐藏的更多相关文章
- 控制input输入框中提示信息的显示和隐藏的方法
在运用html+css+javascrpt进行页面制作时,我们往往会遇到一些影响用户体验,而又容易被我们忽视的小细节.比如,input输入框中的提示信息,怎样才能根据对象获得和失去焦点而实现其显示和隐 ...
- 控制input标签中只能输入数字以及小数点后两位
js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...
- 关于django中input标签中file类型以及开路由
0825自我总结 关于django中input标签中file类型 1.input提交图片实时展示 <img src="/static/img/default.png" wid ...
- js控制密码的显示与隐藏实例
原理是建立2个input,一个type是text,一个type是password.在点击按钮时,这两input个的显示状态与val()的值在切换. html: <!DOCTYPE html> ...
- unity3d中让物体显示和隐藏
unity3d中让物体显示和隐藏的方法 gameObject.renderer.enabled //是控制一个物体是否在屏幕上渲染或显示 而物体实际还是存在的 仅仅是想当于隐身 而物体本身的碰撞体还 ...
- JS实现登录页密码的显示和隐藏功能
在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单,通过点击事件来改变input的type类型,具体过程看代码: 在没给大家分享实现代码之前,先给大家展示下效 ...
- Android文本输入框(EditText)切换密码的显示与隐藏
package cc.c; import android.app.Activity; import android.os.Bundle; import android.text.Selection; ...
- IOS swift实现密码的显示与隐藏切换
最近做项目遇到一个需要做密码的显示与隐藏功能,简单从功能上讲是比较简单的,但是,ios有个恶心的BUG,就是在切换显示密码后再隐藏密码时输入就被清空了,这个非常不友好,为了解决这个问题,我在网上找了相 ...
- 【HTML】input标签中alt属性和title属性的比较
经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...
随机推荐
- Windows用户模式调试内部组件
简介 允许用户模式调试工作的内部机制很少得到充分的解释.更糟糕的是,这些机制在Windows XP中已经发生了根本性的变化,当许多支持被重新编写时,还通过将ntdll中的大多数例程作为本地API的一部 ...
- ShardingSphere初探1 --Sharding-JDBC
Sharding-JDBC 引入maven依赖: <dependency> <groupId>org.apache.shardingsphere</groupId> ...
- 机器学习---逻辑回归(一)(Machine Learning Logistic Regression I)
逻辑回归(Logistic Regression)是一种经典的线性分类算法.逻辑回归虽然叫回归,但是其模型是用来分类的. 让我们先从最简单的二分类问题开始.给定特征向量x=([x1,x2,...,xn ...
- web 视频播放器clappr 相关
https://github.com/tjenkinson/clappr-thumbnails-plugin/ https://github.com/andrefilimono/clappr-flvj ...
- 【0521模拟赛】小Z爱数学
题目描述 小Z想求F(n,k),F(n,k)表示n的所有因数pi中,满足n/pi <= k 的和. 小Z发现还是很水,所以他决定加大难度. 求 小Z还准备了很多个询问.现在你来解决一下吧. 输入 ...
- [Beta]第十次 Scrum Meeting
[Beta]第十次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/5/20 22:00 20min 大运村公寓6F寝室 附Github仓库:WEDO 例会照片 工作情况 ...
- 2019_软工实践_Beta(4/5)
队名:955 组长博客:点这里! 作业博客:点这里! 组员情况 组员1(组长):庄锡荣 过去两天完成了哪些任务 文字/口头描述 ? 测试新功能中 展示GitHub当日代码/文档签入记录 接下来的计划 ...
- Python Selenium Webdriver常用方法总结
Python Selenium Webdriver常用方法总结 常用方法函数 加载浏览器驱动: webdriver.Firefox() 打开页面:get() 关闭浏览器:quit() 最大化窗口: m ...
- 【转】使用AllureReport生成测试报告
Allure简介 Allure是一个report框架,可以基于一些测试框架生成测试报告,比较常用的一般是Junit/Testng框架:Allure 生成的报告样式简洁美观,同时又支持中文:Allure ...
- Ingress-nginx 部署使用
Ingress-nginx 部署使用 一.Ingress 简介 在Kubernetes中,服务和Pod的IP地址仅可以在集群网络内部使用,对于集群外的应用是不可见的.为了使外部的应用能够访问集群内 ...