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 相关文章推荐
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
javascript头像上传代码实例
Sep 28 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
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
CI框架数据库查询之join用法分析
2016/05/18 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
JavaScript闭包详解
2015/02/02 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
微信小程序入门教程
2016/11/18 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
Python数据操作方法封装类实例
2017/06/23 Python
python读取文件名称生成list的方法
2018/04/27 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
深入了解Django中间件及其方法
2019/07/26 Python
python修改字典键(key)的方法
2019/08/05 Python
Python PIL库图片灰化处理
2020/04/07 Python
Farnell德国:电子元器件供应商
2018/07/10 全球购物
销售演讲稿范文
2014/01/08 职场文书
高三毕业寄语
2014/04/10 职场文书
学习十八大的心得体会
2014/09/01 职场文书
护士医德医风自我评价
2014/09/15 职场文书
挂靠协议书
2015/01/27 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
家长会主持词开场白
2015/05/29 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python