el-input 標(biāo)簽中密碼的顯示和隱藏功能的實例代碼
效果展示:
密碼隱藏:
密碼顯示:
代碼展示:
一:<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"屬性,不然無法顯示圖標(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(){ //點擊圖標(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)簽中密碼的顯示和隱藏,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
bootstrap tooltips在 angularJS中的使用方法
這篇文章主要介紹了bootstrap tooltips在 angularJS中的使用 ,需要的朋友可以參考下2019-04-04javascript超過容器后顯示省略號效果的方法(兼容一行或者多行)
下面小編就為大家?guī)硪黄猨avascript超過容器后顯示省略號效果的方法(兼容一行或者多行)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07JavaScript獲取頁面中表單(form)數(shù)量的方法
這篇文章主要介紹了JavaScript獲取頁面中表單(form)數(shù)量的方法,涉及javascript操作表單document.forms數(shù)組的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04將html頁面保存成圖片,圖片寫入pdf的實現(xiàn)方法(推薦)
下面小編就為大家?guī)硪黄獙tml頁面保存成圖片,圖片寫入pdf的實現(xiàn)方法(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09javaScript中一些常見的數(shù)據(jù)類型檢查校驗
最近在面試的時候又被問到JS中檢查校驗數(shù)據(jù)類型的方法,所以這篇文章主要給大家介紹了關(guān)于javaScript中一些常見的數(shù)據(jù)類型檢查校驗的相關(guān)資料,需要的朋友可以參考下2022-05-05