el-input 標(biāo)簽中密碼的顯示和隱藏功能的實例代碼
更新時間：2019年07月19日 16:42:23 作者：十五小哥哥
本文通過實例代碼給大家介紹了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)文章
這篇文章主要為大家詳細(xì)介紹了純JavaScript實現(xiàn)猜數(shù)字游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
本文主要介紹了在CEF中實現(xiàn)JavaScript和C++的雙向交互,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
這篇文章主要為大家詳細(xì)介紹了javascript拖拽應(yīng)用實例，拖拽條拖到底，驗證碼顯示出來，感興趣的小伙伴們可以參考一下2016-03-03
使用JS實現(xiàn)鼠標(biāo)放上圖片進(jìn)行放大離開實現(xiàn)縮小功能
這篇文章主要介紹了使用JS實現(xiàn)鼠標(biāo)放上圖片進(jìn)行放大離開實現(xiàn)縮小功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
javascript結(jié)合Flexbox簡單實現(xiàn)滑動拼圖游戲
本文給大家分享的是一則使用javascript結(jié)合Flexbox簡單實現(xiàn)滑動拼圖游戲的代碼，雖然沒有實現(xiàn)完整的功能，但是還是推薦給大家，喜歡的朋友可以繼續(xù)做完2016-02-02
javascript 拷貝節(jié)點cloneNode()使用介紹
這篇文章主要介紹了javascript 節(jié)點操作拷貝節(jié)點cloneNode()的使用,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片上傳，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
在B/S開發(fā)中經(jīng)常用到的JavaScript技術(shù)
javascript運用中，經(jīng)常用到的代碼，建議每段代碼都要看下，注意本文有三頁，仔細(xì)看玩，逐個研究透徹，那么網(wǎng)頁中常見的問題，你也就熟悉掌握了2008-05-05
這篇文章主要給大家分享的是常用的js函數(shù)的方法，告別搜索引擎的幫助，提高你的開發(fā)效率，,需要的朋友可以參考一下，希望對你的學(xué)習(xí)有所幫助2021-12-12
這篇文章主要介紹了js代碼驗證手機號碼和電話號碼是否合法，手機號碼和電話號碼在某些網(wǎng)站都是必填項，為了提高用戶體驗度，一般要進(jìn)行合法性校驗的,需要的朋友可以參考下2015-07-07