效果展示:

  密码隐藏:

  密码显示:

代码展示:

  一:<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 标签中密码的显示和隐藏的更多相关文章

  1. 控制input输入框中提示信息的显示和隐藏的方法

    在运用html+css+javascrpt进行页面制作时,我们往往会遇到一些影响用户体验,而又容易被我们忽视的小细节.比如,input输入框中的提示信息,怎样才能根据对象获得和失去焦点而实现其显示和隐 ...

  2. 控制input标签中只能输入数字以及小数点后两位

    js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...

  3. 关于django中input标签中file类型以及开路由

    0825自我总结 关于django中input标签中file类型 1.input提交图片实时展示 <img src="/static/img/default.png" wid ...

  4. js控制密码的显示与隐藏实例

    原理是建立2个input,一个type是text,一个type是password.在点击按钮时,这两input个的显示状态与val()的值在切换. html: <!DOCTYPE html> ...

  5. unity3d中让物体显示和隐藏

    unity3d中让物体显示和隐藏的方法 gameObject.renderer.enabled //是控制一个物体是否在屏幕上渲染或显示  而物体实际还是存在的 仅仅是想当于隐身 而物体本身的碰撞体还 ...

  6. JS实现登录页密码的显示和隐藏功能

    在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单,通过点击事件来改变input的type类型,具体过程看代码: 在没给大家分享实现代码之前,先给大家展示下效 ...

  7. Android文本输入框(EditText)切换密码的显示与隐藏

    package cc.c; import android.app.Activity; import android.os.Bundle; import android.text.Selection; ...

  8. IOS swift实现密码的显示与隐藏切换

    最近做项目遇到一个需要做密码的显示与隐藏功能,简单从功能上讲是比较简单的,但是,ios有个恶心的BUG,就是在切换显示密码后再隐藏密码时输入就被清空了,这个非常不友好,为了解决这个问题,我在网上找了相 ...

  9. 【HTML】input标签中alt属性和title属性的比较

    经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...

随机推荐

  1. CLR内部异常(中)

    不捕捉某一个异常 常常有这种情况,代码不需要捕捉异常,但需要执行一些清理或者修正操作.虽然不总是,支持物(holders)经常用在这种场景里.在支持物(holders)不适用的情况里,CLR提供了两个 ...

  2. PHP.INI生成环境配置文件

    extension_dir = /home/php/lib/php/extensions/no-debug-zts- zend_extension = opcache.so extension = p ...

  3. 洛谷P3177 树上染色

    题目 一道非常好的树形DP. 状态:\(dp[u][n]\)为u的子树选n个黑点所能得到的收益最大值. 则最终的结果就是\(dp[root][k],\)\(root\)可以为任何值,为了方便,使\(r ...

  4. 一个禁用mac内置键盘的方法

    一个禁用mac内置键盘的方法 强大的 karabiner, 非常好用. 可以直接在有外接键盘连接的情况下, 禁用掉内置键盘 另外一个方法是启用mac的 鼠标键, 感觉用处不是很大, 修饰健并没有被禁用 ...

  5. DACL原理.控制文件的访问权限(文件,注册表.目录.等任何带有安全属性的对象.)

    目录 一丶简介 1.DACL是什么. 2.如何创建一个自己控制的文件. 3.SDDL是个什么鬼. 二丶 编写SDDL 控制的文件 一丶简介 1.DACL是什么. DACL称为自主访问的控制列表.是应用 ...

  6. 设置win 10 软件开机启动

    C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp 将快捷方式粘贴进去即可

  7. TreeMap用法总结

    TreeMap用法总结 public class TreeMap<K,V> extends AbstractMap<K,V> implements NavigableMap&l ...

  8. uniapp - 关于ios调试

    [ios调试] 1.一台windows电脑.一根apple数据线(一旦连接以后,apple设备就会自动识别itunes软件,如果没有安装会提示) 2.安装itunes (爱思助手) 3.官方教程:ht ...

  9. MySQL事务隔离级别(一)

    本文实验的测试环境:Windows 10+cmd+MySQL5.6.36+InnoDB 一.事务的基本要素(ACID) 1.原子性(Atomicity):事务开始后所有操作,要么全部做完,要么全部不做 ...

  10. PHP系列 | PHP5.6 安装 endroid/qr-code 遇到的问题

    官方库地址:https://packagist.org/packages/endroid/qr-code PHP5.6 的最高版本为:2.5.1 通过composer安装 composer requi ...