效果展示:

  密码隐藏:

  密码显示:

代码展示:

  一:<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. [Dart] Mixin

    Docs Mixins are a way of reusing a class’s code in multiple class hierarchies. void main() { Animal ...

  2. LeetCode 1101. The Earliest Moment When Everyone Become Friends

    原题链接在这里:https://leetcode.com/problems/the-earliest-moment-when-everyone-become-friends/ 题目: In a soc ...

  3. learning scala list.collect

    collect will apply a partial function to all elements of a Traversable and return a different collec ...

  4. 关于Windows系统里的事后调试

    我一直在想,应用程序抛出未处理的异常和附加到进程的调试器之间会发生什么.显然这些信息就在我眼皮底下,但我是瞎子.Windows调试器关于事后调试的文档包含了您想要知道的所有详细信息. 最常见的应用程序 ...

  5. python(二)——if条件语句与基本数据类型

    if语句 缩进要保持一致 if 1 == 1: print('hello') if 2 == 2: print('world') else: print('python') elif inp = in ...

  6. Linux常用命令合集

    常用命令合集 命令选项和参数 Linux中的命令格式为:command [options] [arguments]  //中括号表示可选的,即有些命令不需要选项也不需要参数,但有的命令在运行时需要多个 ...

  7. cjss 像编写css 一样开发web应用

    cjss 提供了使用类似css 的方式编写web 应用 cjss 包含的阶段 data prepare body element 几点说明 并不是所以阶段必须使用,但是每个级别只能存在一个script ...

  8. TCP BBR 从开启到关闭:以 Debian 9 为例

    TCP BBR 从开启到关闭:以 Debian 9 为例 开启 执行如下命令: echo "net.core.default_qdisc=fq" >> /etc/sys ...

  9. 【luoguP2995】[USACO10NOV]牛的照片Cow Photographs

    题目链接 首先求出原序列的逆序对个数, 然后考虑每次将目标序列最前面的数放在最后,即最小的数变为最大 设最小数的位置是\(p\),那么逆序对的个数增加了\(n-p\),减少了\(p-1\) #incl ...

  10. struct udphdr

    udphdr结构包含在/usr/src/linux/include/linux/udp.h struct udphdr { __u16 source; __u16 dest; __u16 len; _ ...