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即可以是元素的属性 ...
随机推荐
- LightOJ - 1333 - Grid Coloring
链接: https://vjudge.net/problem/LightOJ-1333 题意: You have to color an M x N two dimensional grid. You ...
- 06-Flutter移动电商实战-dio基础_Get_Post请求和动态组件协作
上篇文章中,我们只看到了 dio 的使用方式,但并未跟应用关联起来,所以这一篇将 dio 网络请求与应用界面结合起来,当然这也是为以后的实战作基础准备,基础打牢,我们才能飞速前进. 1.案例说明 我们 ...
- NOI 2019 游记
day -1 去报了个到,顺便买了一大堆衣服. 感觉学校饭堂不太行. day 0 上午是开幕式,. 下午是笔试,顺利获得 \(100\) 分. day 1 先看题. 第一题看到 \(At^2+Bt+C ...
- 浮动,HTML大知识
标准文档流: 指元素根据块级元素和行内元素的特性,按照从上到下,从左到右的顺序依次排列,这种方式是默认的排列方式 一.块级元素和内联元素 块级元素内容独占一行,内联元素内容自动拼接 display属性 ...
- koa post提交数据,koa-bodyparser中间件来获取post提交数据
原生 Nodejs 获取 post 提交数据 首先创建并初始化一个node应用,根路由使用index.ejs模板 var Koa=require('koa') var router = require ...
- D3.js的v5版本入门教程(第三章)—— 选择元素和绑定数据
D3.js的v5版本入门教程(第三章) 在D3.js中,选择元素和绑定元素是最基本的内容,也是很重要的内容,等你看完整个教程后你会发现,这些D3.js教程都是在选择元素和绑定元素的基础上展开后续工作的 ...
- 安装关系型数据库MySQL和大数据处理框架Hadoop
1. 简述Hadoop平台的起源.发展历史与应用现状.列举发展过程中重要的事件.主要版本.主要厂商:国内外Hadoop应用的典型案例. (1)Hadoop的介绍: Hadoop最早起源于Nutch,N ...
- .net core facebook 容易进的一个坑
Microsoft.AspNetCore.Authentication.Facebook 库 services.AddAuthentication(CookieAuthenticationDefaul ...
- npm版本管理 命令
npm采用了semver规范作为依赖版本管理方案.semver 约定一个包的版本号必须包含3个数字 MAJOR.MINOR.PATCH 意思是 主版本号.小版本号.修订版本号 MAJOR 对应大的版本 ...
- sqlite数据库使用具体案例以及mysqlite.db数据库
本文操作是测试数据库的其中一张表,其中包括清空sqlite数据库MyGroup表中的数据,清空sqlite数据库sqlite_sequence表中的自增变量,sqlite数据库MyGroup直接插入数 ...