html输入密码自动隐藏,el-input 标签中密码的显示和隐藏

本文将为您描述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 标签中密码的显示和隐藏就为您介绍到这里，感谢您关注懒咪学编程c.lanmit.com.

本文地址：https://c.lanmit.com/Webqianduan/htmlyucss/5084.html