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

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

Wirkung:

Ideen:

  1. Verwenden Sie das Eingabetypattribut, um das Kennwort anzuzeigen, wenn der Typwert Text ist, und um das Kennwort auszublenden, wenn der Typwert Kennwort ist.
  2. 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.
  3. 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

Artikel empfehlen

Installieren Sie MySQL 5.7.17 im Win10-System

Das Betriebssystem Win10 MySQL ist die 64-Bit-ZIP...

Implementierungscode für die Schiebeschalterfunktion der Registerkarte „Links“ und „Rechts“ des WeChat-Applet

Effektbild: 1. Einleitung Ihr eigenes Applet muss...

Detaillierte Erläuterung des Ausführungsplans, Beispiel für einen Befehl in MySQL

Vorwort Der Befehl „Explain“ ist die primäre Mögl...

Beheben Sie den Fehler während der Verbindungsausnahme in Docker

Wenn Sie Docker zum ersten Mal verwenden, werden ...

Detaillierte Erläuterung des Aufbaus und der Verwendung des Docker Private Warehouse

Das Image kann auf hub.docker.com gespeichert wer...

Detaillierte Erklärung zu Javascript-Dateien und Blobs

Inhaltsverzeichnis Datei() Grammatik Parameter Be...

Beispiel für das Erstellen eines virtuellen Hosts basierend auf dem Apache-Port

Apache: Virtuellen Host basierend auf Port erstel...

CSS zum Erzielen des Like-Card-Effekts in der unteren rechten Ecke der Webseite (Beispielcode)

Wirkung Um HTML zu implementieren, bereiten Sie z...

So implementieren Sie Polygonbrechung in Echtzeit mit Threejs

Inhaltsverzeichnis Vorwort Schritt 1: Aufbau und ...

So starten und starten Sie nginx unter Linux neu

Nginx (Engine x) ist ein leistungsstarker HTTP- u...

So installieren Sie Oracle_11g mit Docker

Installieren Sie Oracle_11g mit Docker 1. Ziehen ...

Detaillierte Erläuterung mehrerer Methoden zur Deduplizierung im Javascript-Array

Inhaltsverzeichnis Array-Deduplizierung 1 Doppels...

Über gutes Design

<br />Auf zehntausend Personen, die die Frag...

Tiefgreifendes Verständnis der Erstellung und Implementierung von Servlets in Tomcat

1. Was ist ein Servlet 1.1. Erklären Sie in offiz...

Schauen wir uns einige leistungsstarke Operatoren in JavaScript an

Inhaltsverzeichnis Vorwort 1. Null-Koaleszenzoper...