vue實現(xiàn)密碼顯示隱藏切換功能
更新時間：2018年02月23日 11:03:38 作者：紅葉1994
這篇文章主要介紹了vue實現(xiàn)密碼顯示隱藏切換功能,需要的朋友可以參考下
先給大家分享效果圖：
具體實現(xiàn)代碼如下所示：
html：
<group> <span>設(shè)置密碼</span> <x-input :type="this.registration_data.pwdType" placeholder="請?zhí)顚懨艽a" @on-change="password"></x-input> <img :src="this.registration_data.src" @click="changeType()"/> </group>
script：
data () {
return {
registration_data:{
pwdType:"password",
src:require("../assets/colse_eyes.png")
}
}
},
methods:{
changeType(){
this.registration_data.pwdType = this.registration_data.pwdType==='password'?'text':'password';
this.registration_data.src=this.registration_data.src==require("../assets/colse_eyes.png")?require("../assets/open_eyes.png"):require("../assets/colse_eyes.png");
}
}
注：帶小眼睛的睜開閉合。
總結(jié)
以上所述是小編給大家介紹的vue實現(xiàn)密碼顯示隱藏切換功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
相信我們寫Vue代碼時肯定都會在methods中用過this這個關(guān)鍵字，甚至還打印過this查看其內(nèi)容。最終發(fā)現(xiàn)該實例對象竟然是我們的Vue實例對象2022-10-10
這篇文章主要介紹了Vue懸浮窗和聚焦登錄組件經(jīng)驗總結(jié),? 本文整理了實現(xiàn)懸浮窗以及聚焦登錄組件的功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
解決VUE-Router 同一頁面第二次進(jìn)入不刷新的問題
這篇文章主要介紹了解決VUE-Router 同一頁面第二次進(jìn)入不刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了vue綁定設(shè)置屬性的多種方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
解決Vue中的生命周期beforeDestory不觸發(fā)的問題
這篇文章主要介紹了解決Vue中的生命周期beforeDestory不觸發(fā)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)分頁組件的具體代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了Vue-Ant Design Vue-普通及自定義校驗實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
本文以click為例給大家介紹vue.js中常用v-指令，可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運(yùn)行一些 JavaScript代碼，本文通過示例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧2021-10-10
這篇文章主要介紹了Vuex狀態(tài)管理器的使用,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
vue-cli 3.0 版本與3.0以下版本在搭建項目時的區(qū)別詳解
這篇文章主要介紹了vue-cli 3.0 版本與3.0以下版本在搭建項目時的區(qū)別詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12