vue實現(xiàn)密碼顯示隱藏功能的思路詳解

更新時間：2021年03月21日 07:57:19 作者：人生行者

這篇文章主要介紹了vue實現(xiàn)密碼顯示隱藏功能的思路詳解,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

效果：

思路：

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

頁面布局

<div id='app'>
    <!--三元表達式 pwdFlag為真則type是password密碼隱藏 pwdFlag為假則type是text密碼顯示 -->
    密碼：<input :type='pwdFlag?"password":"text"' size='10'>
    <!--pwdFlag為真說明密碼是隱藏的，顯示眼睛打開圖標，反之顯示眼睛關(guān)閉圖標-->
       <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為真說明密碼是隱藏的，顯示眼睛打開圖標，反之顯示眼睛關(guān)閉圖標-->
       <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>

到此這篇關(guān)于vue實現(xiàn)密碼顯示隱藏功能的思路詳解的文章就介紹到這了,更多相關(guān)vue實現(xiàn)密碼顯示隱藏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: