So implementieren Sie die Passwortanzeige und verbergen die Umschaltfunktion in Vue

In diesem Artikel wird hauptsächlich die von Vue implementierte Funktion zum Anzeigen und Ausblenden von Passwörtern vorgestellt. Freunde, die sie benötigen, können darauf verweisen

Zuerst werde ich die Darstellungen mit Ihnen teilen:

Der spezifische Implementierungscode lautet wie folgt:

html:

<group>
  <span>设置密码</span>
  <x-input :type="this.registration_data.pwdType"  placeholder="请填写密码" @on-change="password"></x-input>
　<img :src="this.registration_data.src" @click="changeType()"/>
</group>

Skript:

data () {

 return {

  registration_data:{

   pwdType:"password",
   src:require("../assets/colse_eyes.png")
  }
 }
},
methods:{
changeType(){
 this.registration_data.pwdType = this.registration_data.pwdType==='password'?'text':'password';
 this.registration_data.src=this.registration_data.src==require("../assets/colse_eyes.png")?require("../assets/open_eyes.png"):require("../assets/colse_eyes.png");
}
}

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie übergeordnete Komponenten, um untergeordnete Komponentenereignisse in Vue aufzurufen

So implementieren Sie die datengesteuerte Ansicht Prinzip durch Vuejs

Verwenden Sie $http, um das asynchrone Hochladen von Excel-Dateien in AngularJS zu implementieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Passwortanzeige und verbergen die Umschaltfunktion in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!