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

效果展示：

密码隐藏：

密码显示：

代码展示：

一：标签代码

二：

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";

};

}

},

})

总结

以上所述是小编给大家介绍的el-input 标签中密码的显示和隐藏,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！