HTML密码隐藏标签,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";

};

}

},

})