vue Element-Ui 简单实现输入框密码的显示与隐藏

7月前作者：*neverGiveUp* 分类：Toy博客阅读(56) 违法举报

这篇具有很好参考价值的文章主要介绍了vue Element-Ui 简单实现输入框密码的显示与隐藏。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、效果如下：

element-ui 简单实现密码输入框的显示与隐藏

二、实现代码：

只需要在输入框代码中添加 show-password ，然后在你输入密码时会自动出现眼睛图标，点击图标就可以显示和隐藏密码。

<el-input type="password" prefix-icon="el-icon-lock" v-model="loginForm.passWord" show-password></el-input>

相关资料：

element-ui 图标库： https://element.eleme.cn/#/zh-CN/component/icon文章来源地址https://www.toymoban.com/news/detail-516125.html

到了这里，关于vue Element-Ui 简单实现输入框密码的显示与隐藏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

vue中数据滚动显示实现Element-UI中el-table内数据的懒加载

工作中我们经常会用到element-ui组件库中的le-table组件来展示数据，但当table的数据源数量过大的时候统一展示可能会出现页面卡顿，且会影响用户体验，为此我们可以尝试对el-table中的数据做懒加载的效果展示： 1. 挂在阶段监听el-table的scroll滚动事件 2. 当table表格滚动条的位置

2023年04月08日
浏览(45)
Element UI 密码输入框--可切换显示隐藏，自定义图标

data 中 methods 中图片素材

2024年02月03日
浏览(32)
[vue+element-ui] form中输入框无法输入问题的解决方法

目录一.问题发现：二.正确案例与错误原理：三.问题解决笔者在制作登录页面前端时使用elementui+vue技术，发现输入框无法输入任何内容。在csdn上查阅很多文章后发现都无法解决，于是去elementui官网进行反复查看才发现问题所在。最终发现问题是input标签中v-model写的不恰

2024年02月02日
浏览(41)
element-ui实现密码复杂度验证

1、el-form中的rules属性，rules属性定义的是存放多个验证规则的数组formRules（这个数组是个人起的名字），el-form-item中的prop属性，对应的是formRules数组中的对应的规则名称，然后在el-input标签内，设置一个v-model双向数据绑定，以及其他的属性等。:model是绑定属性，置空在规则

2024年02月07日
浏览(30)
一看就会；vue实现图片上传回显及修改（element-ui限制一张图片上传，没有图片显示+号，有图片显示图片隐藏+号）

1.单独封装element-UI的upload文件上传组件； 2.组件完成上传、回显、修改功能； 3.没有图片时，显示上传的+号，有图片时隐藏上传的+号；父组件：代码：

2024年02月15日
浏览(26)
Vue-给element-ui的input输入框绑定键盘事件不生效

在vue中使用elementui的input组件绑定回车事件生效。 el-input @keyup.enter=\\\'方法\\\' /el-input 在vue中如果直接使用 v-on或@ 监听事件的话, 监听的是由组件中使用$emit自定义的事件 , 例如下面代码。使用 .native 修饰符, 告诉vue这是触发的原生事件不是自定义事件 , 比如下面这个监听 ele

2024年02月13日
浏览(43)
vue使用element-ui，el-table不显示

例如：新增了一个表格，按官网代码贴过来的，结果一直不显示代码如下一模一样，其他数据正常显示，就表格不显示其实版本库不一致导致的，贼坑，又不提示先卸载element-ui安装一个低版本的element-ui就可以解决``

2024年02月11日
浏览(47)
vue+element-ui input输入框设置属性type为number去除右边的上下按键

当 input type=number 时，去掉后面的上下按钮 1.全局样式改变： 2.在style中使用的是vue+element，通常写当前页面的样式时使用scoped，防止篡改其他页面样式，但是这样会发现上面的代码失效，此时需要使用/deep/去寻找【定义样式】去除表框、去除上下箭头、去除滚轮事件 3.在sty

2024年02月11日
浏览(38)
vue element-ui el-input输入框绑定@keyup.enter回车事件无效

由于element-ui把input进行了封装，input外面是多一层div的。在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现，遇到后可以在网页中查看dom结构分析原因。所以对于el-input，使用 @keyup.enter是无效的，需要加上 .native 限制符 .native修饰符的作用：

2024年02月16日
浏览(39)
vue+element-ui carousel走马灯一次轮播(显示)5张图片

HTML JS CSS HTML JS CSS 因为elemengt-ui没有修改一次显示多个的属性, 找了好久找到一篇修改为一次显示6张的文章,且只有子组件没有父组件使用的代码。在此基础上进行修改进行使用，在此记录下来，方便以后使用。有兴趣的可以去原文章研究下。参考文章： VUE ———— Element

2024年02月11日
浏览(48)