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)文章
element ui中表單el-form的label如何設(shè)置寬度
這篇文章主要介紹了element ui中表單el-form的label如何設(shè)置寬度，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)表格分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue計算屬性時v-for處理數(shù)組時遇到的一個bug問題
這篇文章主要介紹了在做vue計算屬性，v-for處理數(shù)組時遇到的一個bug 問題,需要的朋友可以參考下2018-01-01
Vue基于el-breadcrumb實現(xiàn)面包屑功能(操作代碼)
這篇文章主要介紹了Vue基于el-breadcrumb實現(xiàn)面包屑功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
在Vue.js中,計算屬性（computed properties）是組件的重要組成部分,它們根據(jù)組件的數(shù)據(jù)自動計算新的值,并在數(shù)據(jù)變化時自動更新,本文將探討計算屬性的緩存機(jī)制,并通過有趣的示例展示如何利用計算屬性緩存結(jié)果,提升應(yīng)用性能,需要的朋友可以參考下2025-03-03
插件功能開發(fā)完成后，若需要發(fā)布到公共組件庫中（例如：npmjs），需要對插件進(jìn)行打包并發(fā)布，這篇文章主要介紹了Vue插件打包與發(fā)布的方法示例，感興趣的小伙伴們可以參考一下2018-08-08
Vue3源碼分析組件掛載創(chuàng)建虛擬節(jié)點
這篇文章主要為大家介紹了Vue3源碼分析組件掛載創(chuàng)建虛擬節(jié)點，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue-cli打包后本地運行dist文件中的index.html操作
這篇文章主要介紹了vue-cli打包后本地運行dist文件中的index.html操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue+quasar使用遞歸實現(xiàn)動態(tài)多級菜單
這篇文章主要為大家詳細(xì)介紹了vue+quasar使用遞歸實現(xiàn)動態(tài)多級菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
代替Vue?Cli的全新腳手架工具create?vue示例解析
這篇文章主要為大家介紹了代替Vue?Cli的全新腳手架工具create?vue示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10