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)站的支持！

您可能感興趣的文章:

vue
密碼

相關(guān)文章

element ui中表單el-form的label如何設(shè)置寬度
這篇文章主要介紹了element ui中表單el-form的label如何設(shè)置寬度，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue實現(xiàn)表格分頁功能
這篇文章主要為大家詳細(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使用計算屬性緩存結(jié)果的方法
在Vue.js中,計算屬性（computed properties）是組件的重要組成部分,它們根據(jù)組件的數(shù)據(jù)自動計算新的值,并在數(shù)據(jù)變化時自動更新,本文將探討計算屬性的緩存機制,并通過有趣的示例展示如何利用計算屬性緩存結(jié)果,提升應(yīng)用性能,需要的朋友可以參考下
2025-03-03
Vue插件打包與發(fā)布的方法示例
插件功能開發(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