效果展示：

密碼隱藏：

密碼顯示：

代碼展示：

一：標簽代碼

二：

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 標簽中密碼的顯示和隱藏,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。