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