element密码显示隐藏

点击密码显示隐藏切换，验证密码是否正确 主要使用elment 组件实现

通过改变 type 类型实现 type = password 密码隐藏 type = " " 为空时 密码显示为输入内容

html

<el-form-item prop="user.password"> <el-input v-model="formData.user.password" :type="pwdType" prefix-icon="el-icon-lock" placeholder="请输入密码" autocomplete="new-password" > <i slot="suffix" class="el-icon-view" @click="showPwd"></i> </el-input> </el-form-item> export default{ data(){ pwdType:"password" } methods:{ showPwd() { this.pwdType === "password" ? (this.pwdType = "") : (this.pwdType = "password"); let e = document.getElementsByClassName("el-icon-view")[0]; this.pwdType == ""? e.setAttribute("style", "color: #c0c4cc") : e.setAttribute("style", "color: #409EFF"); }, } }