vue+element-ui实现显示隐藏密码

川长思鸟来 2021-07-25 16:41 609阅读 0赞

<template>
        <div id='test'>
            <el-form :model="formPassword" label-position="left">
            <el-form-item label="旧密码">
              <el-input type="password" v-model="formPassword.oldPassword" placeholder="请输入旧密码"></el-input>
            </el-form-item>
            <el-form-item v-if="visible" label="新密码">
              <el-input type="password" v-model="formPassword.newPassword" placeholder="请输入新密码">
                <i slot="suffix" title="显示密码" @click="changePass('show')" style="cursor:pointer;"
                   class="el-input__icon iconfont icon-hide"></i>
              </el-input>
            </el-form-item>
            <el-form-item v-else label="新密码">
              <el-input type="text" v-model="formPassword.newPassword" placeholder="请输入新密码">
                <i slot="suffix" title="隐藏密码" @click="changePass('hide')" style="cursor:pointer;"
                   class="el-input__icon iconfont icon-show"></i>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
    </template>
    <script>
        export default {
        data() {
          return {
            formPassword: {
              oldPassword: '',
              newPassword: ''
            },
            visible: true      
          }
        },
        methods: {
          changePass(value) {
            this.visible = !(value === 'show');
          }    //判断渲染，true:暗文显示，false:明文显示
        }
      }
    </script>

![20191206181724638.gif][]

[20191206181724638.gif]: /images/20210725/12e998232b794b348480a0f3bf00e4a9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，609人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue+element-ui实现显示隐藏密码

*1.第一种方法通过控制样式，还有vue的v-if 条件渲染来实现。代码如下：** ![在这里插入图片描述][20190822111552514.png]![在这里插...

妖狐艹你老母/ 2024年04月17日 05:27/ 0 赞/ 25 阅读

相关 Android中EditText的密码显示与隐藏

文章目录代码展示方法一：修改TransformationMethod 布局文件 Activity文件

你的名字/ 2023年09月23日 16:47/ 0 赞/ 93 阅读

相关 2.用js实现显示和隐藏密码

css代码如下： <style> { margin: 0; padding: 0;

雨点打透心脏的1/2处/ 2022年12月12日 04:38/ 0 赞/ 167 阅读

相关 angularjs2.x 密码隐藏显示的实例

angularjs2 ng2 密码隐藏显示代码结合ionic2开发移动端项目，注册页的密码的input一般用password，但是用户输入密码时可能会输入错误，需要显示成tex

蔚落/ 2022年05月27日 09:15/ 0 赞/ 175 阅读

相关 js实现显示与隐藏

总结如下： 1.jQuery中隐藏元素的hide方法让页面上的元素不可见，一般可以通过设置css的display为none属性。但是通过css直接修改是静态

亦凉/ 2022年05月26日 08:15/ 0 赞/ 1053 阅读

相关密码隐藏/显示的简单实现

先上效果图吧： ![20180515113121636][] ![201805151131466][] 实现原理：原理很简单，就是通过对显示密码单选框选中状态

短命女/ 2022年05月25日 13:07/ 0 赞/ 430 阅读

相关 JavaScript实现密码框小眼睛按钮的显示与隐藏

眼睛小按钮的实现需要借助fontawesome里面的小图标：[http://fontawesome.dashgame.com/][http_fontawesome.dashga

痛定思痛。/ 2022年02月15日 07:41/ 0 赞/ 313 阅读

相关 input 密码显示与隐藏

H5隐藏密码与显示 HTML <div class="weui-cell__bd new_password"> <input clas

深藏阁楼爱情的钟/ 2022年01月19日 01:59/ 0 赞/ 443 阅读

相关 vue+element-ui实现显示隐藏密码

<template> <div id='test'> <el-form :model="formPassword" label-

川长思鸟来/ 2021年07月25日 16:41/ 0 赞/ 610 阅读

相关 vue实现密码显示隐藏、很简单易懂

效果： ![20210319180857547.gif][] 思路： 1. 利用input的type属性，当type值是text的时候展示密码，当t

系统管理员/ 2021年07月24日 13:58/ 0 赞/ 445 阅读