#VUE中登入密碼顯示與隱藏的最簡設計——基於iview [toc] #1.背景 近期，在使用abp開發專案過程中，前端vue輸入登入密碼時預設隱藏，但是如果使用者輸錯密碼需要切換顯示跟隱藏。故有此文。 #2.實現最終效果 ##2.1 隱藏密碼  ##2.2 顯示密碼  >顯示密碼需要點選密碼框左側眼睛 #3.實現思路 ##3.1 v-if判斷當前密碼顯示狀態 密碼輸入框跟密碼圖示最外層用Div標籤包住，並且用vue的v-if v-else監聽其顯示還是隱藏狀態。 ``` ``` 定義顯示狀態值switchPassDisFlag預設情況是隱藏。 ``` switchPassDisFlag:boolean=false ``` >這裡用得是typescript強型別，所以需要定義成boolean型別，之所以定義成boolean型別是為了下面監聽圖示點選事件中狀態取反方便。 ##3.2 密碼隱藏狀態 使用Div標籤包住圖示跟密碼輸入框，並且設定閉眼圖示，輸入框型別為password。 使用圖示如下： 選中Iview頁面的圖示選單如下圖  選中如下圖的兩隻眼睛即可  密碼隱藏狀態下，顯示閉眼圖示，跟密碼型別，同時監聽眼睛圖示的點選事件，以便切換到睜眼狀態（即密碼顯示狀態）。 ``` div v-if="switchPassDisFlag"> ``` ##3.3 密碼顯示狀態 密碼顯示狀態下，顯示睜眼圖示，跟text型別，同時監聽眼睛圖示的點選事件， 以便切換到閉眼狀態。 ``` ``` ##3.4 兩種眼睛圖示（睜眼，閉眼）的監聽切換密碼顯示狀態事件 ``` SwitchPassDis() { this.switchPassDisFlag=!this.switchPassDisFlag; } ``` #4.小結 + 本文不需要引入圖片，方便的利用了iview的睜閉眼圖示； + 利用了vue中 v-if,v-else直接面向標籤（即顯示資料）程式設計； + 靈活利用了div標籤，因為iview的icon圖示是無法監聽點選事件的，而本文把icon圖示用div標籤包住，從而實現了點選監聽。![] 版權宣告：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連結和本宣告。 本文連結：https://www.cnblogs.com/JerryMouseLi/p/12422