Cara Show Hide Password Dengan VueJs

Pada kesempatan kali ini saya akan membahas tentang cara show hide password dengan vuejs, Sahabat tentu pernah melakukan register, form register sendiri tentu akan memasukan password, nah pada form input password tentu ada sebuah fungsi show hide untuk melihat karakter yang dimasukan sebagai password.Bagaimana cara membuat show hide password, baiklah perhatikan langkah-langkah berikut ini.

Langkah pertama buat struktur HTML seperti code dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Show Hide Password Dengan VueJS</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-4"></div>
			<div class="col-md-4" id="app">
				<h5 class="text-center">Cara Show Hide password Dengan VueJS</h5>
				<div class="input-group mb-3">
				  <input :type="passwordText" v-model="password" class="form-control" placeholder="Masukan Password Anda..." aria-describedby="button-addon2">
				<div class="input-group-append">
			    	<button @click="switchVisibility" class="btn btn-outline-warning" type="password" id="button-addon2">Click</button>
			  	</div>
			  	</div>
			</div>
			<div class="col-md-4"></div>
		</div>
	</div>

Jika diperhatikan pada code diatas saya menggunakan library bootstrap agar tampilan form lebih rapih dan sangat mudah digunakan serta ada library dari vuejs.

Langkah selanjutnya tambahkan code Javascript berikut ini:

<script>
		const vm = new Vue({ el: '#app', data: { password: '', passwordText: 'password' }, methods: { switchVisibility() { this.passwordText = this.passwordText === 'password' ? 'text' : 'password' } } })
	</script>

Sekarang coba simpan code-code diatas lalu buka pada browser masing-masing dan lihat hasilnya apakah sudah benar, jika benar maka akan seperti pada tampilan dibawah ini:

Demikian pembahasan kali ini tentang cara membuat show hide password dengan vuejs, sampai jumpa dengan pembahasan lainnya dan selamat mencoba.

terima kasih

Kategori