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

妖狐艹你老母 2024-04-17 05:27 24阅读 0赞

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

<template>
    <div>
    	<el-form>
    		 <el-form-item v-if="visible" label="密码">
                    <el-input type="password" v-model="formPassword.newPassword" placeholder="请输入密码" style="width:200px">
                        <i slot="suffix" title="显示密码" @click="changePass('show')" style="cursor:pointer;"
                           class="el-input__icon iconfont el-icon-open"></i>
                    </el-input>
                </el-form-item>
                <el-form-item v-else label="密码">
                    <el-input type="text" v-model="formPassword.newPassword" placeholder="请输入密码" style="width:200px">
                        <i slot="suffix" title="隐藏密码" @click="changePass('hide')" style="cursor:pointer;"
                           class="el-input__icon iconfont el-icon-turn-off"></i>
                    </el-input>
                </el-form-item>
    	</el-form>
    </div>
    </template>
    <script>
    	export default{ 
    		data(){ 
    			return{ 
    				formPassword: { 
                        newPassword: ''
                    },
                    visible: true
    			}
    		}
    	}
    </script>

**2.使用element-ui的组件**  
![在这里插入图片描述][20190822112354372.png]![在这里插入图片描述][20190822112407315.png]

<template>
    	<div>
    		<el-input placeholder="请输入密码" v-model="input" show-password></el-input>
    	</div>
    </template>
    <script>
      export default { 
        data() { 
          return { 
            input: ''
          }
        }
      }
    </script>

[20190822111552514.png]: https://img-blog.csdnimg.cn/20190822111552514.png
[20190822111715721.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/4819f68977c54237842632e8375c1c5f.png
[20190822112354372.png]: https://img-blog.csdnimg.cn/20190822112354372.png
[20190822112407315.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/fe1916a5a8f444188082df1c422f97e8.png