vue實現密碼顯示隱藏功能的思路詳解

Posted on by

效果：

思路：

  1. 利用input的type屬性，當type值是text的時候展示密碼，當type值是password的時候隱藏密碼；
  2. 於是很容易想到用v-bind來綁定type，同時用一個佈爾值來控制，寫成三元表達式的形式；
  3. 加入一個圖片元素，點擊圖標元素切換這個佈爾值，就可以達到切換顯示隱藏，切換佈爾值的同時也切換圖標。

頁面佈局

<div id='app'>
    <!--三元表達式 pwdFlag為真則type是password密碼隱藏 pwdFlag為假則type是text密碼顯示 -->
    密碼：<input :type='pwdFlag?"password":"text"' size='10'>
    <!--pwdFlag為真說明密碼是隱藏的，顯示眼睛打開圖標，反之顯示眼睛關閉圖標-->
       <img :src='pwdFlag?textIcon:pwdIcon' @click="changePwd" style="width:16px;">    
  </div>

JS代碼

new Vue({
  el:'#app',
  data:{
    pwdFlag:true,//密碼標示 true表示當前是密碼形式
    textIcon:'./images/show.jpg',//展示圖標
    pwdIcon:'./images/hide.jpg',//隱藏圖標
  },
  methods:{
    //改變密碼表示
    changePwd:function(){
      //密碼標示取反即可
      this.pwdFlag=!this.pwdFlag;
    }
  }
})

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
 
</style>
<body>
  <div id='app'>
    <!--三元表達式 pwdFlag為真則type是password密碼隱藏 pwdFlag為假則type是text密碼顯示 -->
    密碼：<input :type='pwdFlag?"password":"text"' size='10'>
    <!--pwdFlag為真說明密碼是隱藏的，顯示眼睛打開圖標，反之顯示眼睛關閉圖標-->
       <img :src='pwdFlag?textIcon:pwdIcon' @click="changePwd" style="width:16px;">    
  </div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
  el:'#app',
  data:{
    pwdFlag:true,//密碼標示 true表示當前是密碼形式
    textIcon:'./images/show.jpg',//展示圖標
    pwdIcon:'./images/hide.jpg',//隱藏圖標
  },
  methods:{
    //改變密碼表示
    changePwd:function(){
      //密碼標示取反即可
      this.pwdFlag=!this.pwdFlag;
    }
  }
})
 
</script>
</html>

到此這篇關於vue實現密碼顯示隱藏功能的思路詳解的文章就介紹到這瞭,更多相關vue實現密碼顯示隱藏內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：