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
<template> | |
<div class="form-inline"> | |
<div v-if="!passwordHidden"> | |
<label> | |
<span class="strong-label">{{ fieldLabel }}</span> | |
<input type="text" class="password-field form-control d-inline" v-model="passwordText" /> | |
<span class="display-eye fa fa-eye-slash" @click="hidePassword"></span> | |
</label> | |
</div> | |
<div v-if="passwordHidden"> |
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
<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> --> | |
<template> | |
<div id="app"> | |
<section class="section container"> | |
<h1 class="title">Show / Hide Password In Vue</h1> | |
<p class="content"> | |
This Pen demonstrates a feature that lets the user view the unmasked | |
contents of a password field. A | |
<code>showPassword</code> | |
flag controls whether or not the user is working with a type="text" or |