Last active
May 6, 2021 21:04
-
-
Save MohcinBN/7a8283ddd553b47558ec3dc9207369c4 to your computer and use it in GitHub Desktop.
Vue Js Hide/Show Password
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Show/hide Password</title> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> | |
| </head> | |
| <body> | |
| <!-- | |
| - How we can do that?: We can achieve that with toggle the type of input from 'text' to 'password' and versa on click. | |
| - You can do that using Vanilla Js, Jquery or another framework. | |
| --> | |
| <div id="app"> | |
| <div class="passwordDiv"> | |
| <!-- v-bind to bind data type from data instance --> | |
| <input v-bind:type="fieldType" name="password" id="password" /> | |
| <button @click="switchInputTypes()">Show/Hide</button> | |
| </div> | |
| </div> | |
| <script> | |
| new Vue({ | |
| el: "#app", | |
| data: { | |
| text: "text", | |
| fieldType: "password", | |
| }, | |
| methods: { | |
| switchInputTypes() { | |
| //console.log("test"); | |
| // switch between two value taken from the data type | |
| this.fieldType = | |
| this.fieldType === "password" ? "text" : "password"; | |
| }, | |
| }, | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment