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

Was ist WML?

WML (Wireless Markup Language). Es handelt sich u...

Die Idee und der Prozess von Vue zur Realisierung der Funktion zum Speichern von Konto und Passwort

Inhaltsverzeichnis Umsetzungsideen Es gibt drei M...

Stellen Sie IE8 so ein, dass Code im IE7-Stil verwendet wird

<meta http-equiv="x-ua-kompatibel" co...

Detaillierter Prozess der Installation und Konfiguration von MySQL und Navicat Prenium

Voraussetzung: Mac, zsh installiert, mysql herunt...

Vergleich der von der MySQL-Datenbank unterstützten Speicher-Engines

Inhaltsverzeichnis Speicher-Engine Von MySQL unte...

Benutzerdefiniertes JavaScript-Plug-In zum Implementieren der Tab-Umschaltfunktion

In diesem Artikel wird der spezifische JavaScript...

Implementierungsschritte zur Installation eines FTP-Servers in Ubuntu 14.04

Inhaltsverzeichnis Installieren Softwareverwaltun...

So verwenden Sie mysqldump für vollständige und zeitpunktbezogene Sicherungen

Mysqldump wird für logische Backups in MySQL verw...

js zur Implementierung der Kollisionserkennung

In diesem Artikelbeispiel wird der spezifische Co...

3 Tipps, die Sie beim Erlernen von JavaScript kennen müssen

Inhaltsverzeichnis 1. Der magische Erweiterungsop...

Methode zum Schreiben von bedingten Kommentaren und Beispielcode

Als Front-End-Ingenieure müssen wir mit dem IE ve...

Detaillierte Erklärung des Rewrite-Moduls von Nginx

Das Umschreibmodul ist das Modul ngx_http_rewrite...

So lösen Sie das Phantomleseproblem in MySQL

Inhaltsverzeichnis Vorwort 1. Was ist Phantomlese...

Grafisches Tutorial zur Konfigurationsmethode für die kostenlose Installationsversion von MySQL 5.7.17 (Windows 10)

1. Übersicht Ich habe viel online gesucht und fes...

Detaillierte Erläuterung zum Erstellen eines kontinuierlichen Integrationsclusterdienstes basierend auf Docker-Swarm

Vorwort Dieser Artikel ist lediglich eine einfach...