效果展示:

  密码隐藏:

  密码显示:

代码展示:

  一:<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. Bias, Variance and the Trade-off

    偏差,方差以及两者权衡 偏差是由模型简化的假设,使目标函数更容易学习. 一般来说,参数化算法有很高的偏差,使它们学习起来更快,更容易理解,但通常不那么灵活.反过来,它们在复杂问题上的预测性能更低,无法 ...

  2. lettcode 上的几道哈希表与链表组合的数据结构题

    目录 LRU缓存 LFU缓存 全O(1)的数据结构 lettcode 上的几道哈希表与链表组合的数据结构题 下面这几道题都要求在O(1)时间内完成每种操作. LRU缓存 LRU是Least Recen ...

  3. shell脚本编程基础知识点

    整数比较: -eq:测试两个整数是否相等:相等为真,不等为假 -ne:测试两个整数是否不等:不等为真,相等为假 -gt:测试一个数是否大于另一个数:大于为真,否则为假 -lt:测试一个数是否小于另一个 ...

  4. mysql 创建分组

    mysql> select * from table1; +----------+------------+-----+---------------------+ | name_new | t ...

  5. 2019 SDN第四次上机作业

    作业博客链接:http://edu.cnblogs.com/campus/fzu/fzusdn2019/homework/10017 1. 解压安装OpenDayLight控制器(本次实验统一使用Be ...

  6. 2019 SDN第三次上机作业

    作业要求: 利用Mininet仿真平台构建给定的网络拓扑,配置主机h1和h2的IP地址(h1:10.0.0.1,h2:10.0.0.2),测试两台主机之间的网络连通性: 利用Wireshark工具,捕 ...

  7. Netty Socket编程

    工程结构图 一.Socket服务端 1.创建MyServer 类 public class MyServer { public static void main(String[] args) thro ...

  8. Xamarin图表开发基础教程(9)OxyPlot框架

    Xamarin图表开发基础教程(9)OxyPlot框架 OxyPlot组件构成 OxyPlot组件主要由两个类构成,分别为PlotView和PlotModel.这两个类我们在上文中也使用到了.本节将讲 ...

  9. join方法

    用join拼接两个字符串 a='hehe' b='wawa' print(''.join((a,b))) #'hehewawa' 用join拼接列表中的字符串 l=['a''b','c','d'] p ...

  10. 轻量级Web服务器http-server

    http-server是一个简单的零配置命令行http服务器.可用于h5页面手机端测试 Vue .Angualr.React项目打包后真机测试 github地址:https://github.com/ ...