Detaillierte Erläuterung der Idee zur Implementierung der Funktion zum Anzeigen und Verbergen von Passwörtern in Vue

Wirkung:

Ideen:

Verwenden Sie das Eingabetypattribut, um das Kennwort anzuzeigen, wenn der Typwert Text ist, und um das Kennwort auszublenden, wenn der Typwert Kennwort ist.
Daher ist es einfach, sich vorzustellen, dass man v-bind zum Binden des Typs und einen Booleschen Wert zur Steuerung verwendet, der in Form eines ternären Ausdrucks geschrieben ist.
Fügen Sie ein Bildelement hinzu und klicken Sie auf das Symbolelement, um den Booleschen Wert zu ändern und so den Effekt des Anzeigens und Ausblendens zu erzielen. Durch das Ändern des Booleschen Werts wird auch das Symbol geändert.

Seitenlayout

<div id='App'>
    <!--Wenn der ternäre Ausdruck pwdFlag wahr ist, ist der Typ „Passwort“ und das Passwort wird ausgeblendet. Wenn pwdFlag falsch ist, ist der Typ „Text“ und das Passwort wird angezeigt. -->
    Passwort: <input :type='pwdFlag?"password":"text"' size='10'>
    <!--pwdFlag ist wahr und bedeutet, dass das Passwort ausgeblendet ist und das Symbol mit offenen Augen angezeigt wird, andernfalls wird das Symbol mit geschlossenen Augen angezeigt-->
       <img :src='pwdFlag?textIcon:pwdIcon' @click="changePwd" style="width:16px;">    
  </div>

JS-Code

neuer Vue({
  el:'#app',
  Daten:{
    pwdFlag:true,//Passwort-Flag „true“ bedeutet, dass das aktuelle Passwort die Passwortform hat textIcon:'./images/show.jpg',//Symbol anzeigen pwdIcon:'./images/hide.jpg',//Symbol ausblenden},
  Methoden:{
    //Passwortdarstellung ändern changePwd:function(){
      //Passwort-Flag umkehren this.pwdFlag=!this.pwdFlag;
    }
  }
})

Vollständiger Code

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Dokument</title>
</Kopf>
<Stil>
 
</Stil>
<Text>
  <div id='App'>
    <!--Wenn der ternäre Ausdruck pwdFlag wahr ist, ist der Typ „Passwort“ und das Passwort wird ausgeblendet. Wenn pwdFlag falsch ist, ist der Typ „Text“ und das Passwort wird angezeigt. -->
    Passwort: <input :type='pwdFlag?"password":"text"' size='10'>
    <!--pwdFlag ist wahr und bedeutet, dass das Passwort ausgeblendet ist und das Symbol mit offenen Augen angezeigt wird, andernfalls wird das Symbol mit geschlossenen Augen angezeigt-->
       <img :src='pwdFlag?textIcon:pwdIcon' @click="changePwd" style="width:16px;">    
  </div>
</body>
<script src="vue.js"></script>
<Skript>
neuer Vue({
  el:'#app',
  Daten:{
    pwdFlag:true,//Passwort-Flag „true“ bedeutet, dass das aktuelle Passwort die Passwortform hat textIcon:'./images/show.jpg',//Symbol anzeigen pwdIcon:'./images/hide.jpg',//Symbol ausblenden},
  Methoden:{
    //Passwortdarstellung ändern changePwd:function(){
      //Passwort-Flag umkehren this.pwdFlag=!this.pwdFlag;
    }
  }
})
 
</Skript>
</html>

Damit ist dieser Artikel mit der detaillierten Erläuterung der Idee zur Implementierung von Funktionen zur Anzeige und Ausblendung von Passwörtern in Vue abgeschlossen. Weitere relevante Inhalte zur Implementierung der Anzeige und Ausblendung von Passwörtern in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass alle 123WORDPRESS.COM in Zukunft unterstützen werden!

Das könnte Sie auch interessieren:

Vue implementiert die Anzeige- und Ausblendfunktionen des Anmeldekennworts basierend auf iview
vue + elementUi realisiert die Funktion zum Anzeigen/Ausblenden von Passwörtern + Ändern kleiner Symbole
Vue implementiert die benutzerdefinierte Komponentenfunktion zum Anzeigen und Ausblenden von Kennwörtern
Vue implementiert die Umschaltfunktion zum Anzeigen und Ausblenden von Passwörtern
Vue implementiert Funktionen zur Anzeige und Ausblendung von Passwörtern basierend auf der Eingabe

<<: Alibaba Cloud Centos7.3-Installation, MySQL5.7.18 RPM-Installations-Tutorial

>>: Sortierung der technischen Hinweise zum Linux-Kernel-Gerätetreiber-Kernel-Debugging