el-input 标签中密码的显示和隐藏功能的实例代码


Posted in Javascript onJuly 19, 2019

效果展示:

密码隐藏:

el-input 标签中密码的显示和隐藏功能的实例代码

密码显示:

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 标签中密码的显示和隐藏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
详解vue 命名视图
Aug 14 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
vscode中使用npm安装babel的方法
Aug 02 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 #Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 #Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 #Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 #Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 #Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 #Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 #Javascript
You might like
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
js使用递归解析xml
2014/12/12 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
javascript的几种写法总结
2016/09/30 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
python mock测试的示例
2020/10/19 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
犯错检讨书
2014/02/21 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
《故乡》教学反思
2014/04/10 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
员工2014年度工作总结
2014/12/09 职场文书
请假条应该怎么写?
2019/06/24 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang