el-input 標(biāo)簽中密碼的顯示和隱藏功能的實(shí)例代碼
更新時(shí)間：2019年07月19日 16:42:23 作者：十五小哥哥
本文通過(guò)實(shí)例代碼給大家介紹了el-input 標(biāo)簽中密碼的顯示和隱藏 ,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
效果展示：
密碼隱藏：
密碼顯示：
代碼展示：
一：<el-input>標(biāo)簽代碼
<el-form-item label="密碼" prop="password">
<el-input :type="passw" v-model="adduser.password" style="width: 300px;" >
<%-- input中加圖標(biāo)必須要有slot="suffix"屬性，不然無(wú)法顯示圖標(biāo) --%>
<i slot="suffix" :class="icon" @click="showPass"></i>
</el-input>
</el-form-item>
二：<script type="text/javascript">中代碼
<script type="text/javascript">
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";
};
}
},
})
</script>
總結(jié)
以上所述是小編給大家介紹的el-input 標(biāo)簽中密碼的顯示和隱藏,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
純JavaScript實(shí)現(xiàn)猜數(shù)字游戲
這篇文章主要為大家詳細(xì)介紹了純JavaScript實(shí)現(xiàn)猜數(shù)字游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
JavaScript 和 C++實(shí)現(xiàn)雙向交互
本文主要介紹了在CEF中實(shí)現(xiàn)JavaScript和C++的雙向交互,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
javascript拖拽應(yīng)用實(shí)例（二）
這篇文章主要為大家詳細(xì)介紹了javascript拖拽應(yīng)用實(shí)例，拖拽條拖到底，驗(yàn)證碼顯示出來(lái)，感興趣的小伙伴們可以參考一下2016-03-03
使用JS實(shí)現(xiàn)鼠標(biāo)放上圖片進(jìn)行放大離開(kāi)實(shí)現(xiàn)縮小功能
這篇文章主要介紹了使用JS實(shí)現(xiàn)鼠標(biāo)放上圖片進(jìn)行放大離開(kāi)實(shí)現(xiàn)縮小功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
javascript結(jié)合Flexbox簡(jiǎn)單實(shí)現(xiàn)滑動(dòng)拼圖游戲
本文給大家分享的是一則使用javascript結(jié)合Flexbox簡(jiǎn)單實(shí)現(xiàn)滑動(dòng)拼圖游戲的代碼，雖然沒(méi)有實(shí)現(xiàn)完整的功能，但是還是推薦給大家，喜歡的朋友可以繼續(xù)做完2016-02-02
javascript 拷貝節(jié)點(diǎn)cloneNode()使用介紹
這篇文章主要介紹了javascript 節(jié)點(diǎn)操作拷貝節(jié)點(diǎn)cloneNode()的使用,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片上傳，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
在B/S開(kāi)發(fā)中經(jīng)常用到的JavaScript技術(shù)
javascript運(yùn)用中，經(jīng)常用到的代碼，建議每段代碼都要看下，注意本文有三頁(yè)，仔細(xì)看玩，逐個(gè)研究透徹，那么網(wǎng)頁(yè)中常見(jiàn)的問(wèn)題，你也就熟悉掌握了2008-05-05
這篇文章主要給大家分享的是常用的js函數(shù)的方法，告別搜索引擎的幫助，提高你的開(kāi)發(fā)效率，,需要的朋友可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2021-12-12
js代碼驗(yàn)證手機(jī)號(hào)碼和電話號(hào)碼是否合法
這篇文章主要介紹了js代碼驗(yàn)證手機(jī)號(hào)碼和電話號(hào)碼是否合法，手機(jī)號(hào)碼和電話號(hào)碼在某些網(wǎng)站都是必填項(xiàng)，為了提高用戶體驗(yàn)度，一般要進(jìn)行合法性校驗(yàn)的,需要的朋友可以參考下2015-07-07