效果展示：

密碼隱藏：

密碼顯示：

代碼展示：

一：標(biāo)簽代碼

二：

var app = new Vue({

el:"#app",

data:{

users:[],

total:100,

pageSize:5,

pageNum:1,

//用于顯示或隱藏添加修改表單

add:false,

//用于改變Input類型

passw:"password",

//用于更換Input中的圖標(biāo)

icon:"el-input__icon el-icon-view",

adduser:{

id:null,

name:null,

password:null,

dept_id:null

},

},

methods:{

//密碼的隱藏和顯示

showPass(){

//點(diǎn)擊圖標(biāo)是密碼隱藏或顯示

if( this.passw=="text"){

this.passw="password";

//更換圖標(biāo)

this.icon="el-input__icon el-icon-view";

}else {

this.passw="text";

this.icon="el-input__icon el-icon-loading";

};

}

},

})

總結(jié)

以上所述是小編給大家介紹的el-input 標(biāo)簽中密碼的顯示和隱藏,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

總結(jié)

以上是生活随笔為你收集整理的密码的显示与隐藏php,el-input 标签中密码的显示和隐藏功能的实例代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。