MohcinBN/show-hide-password.html

## show-hide-password.html
<!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/vue@2.6.12/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>
	<!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/vue@2.6.12/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>