Cara Menggunakan Event Handler Toogle pada Vue Js

Vue Js juga mendukung penggunaan Event Handler Toogle atau on-off pada suatu aksi, dengan Toogle ini, kita dapat secara instan mengubah suatu nilai. Toogle menggunakan dua nilai boolean yaitu TRUE dan FALSE.

Format penulisan Toogle adalah:

nilai_x = !nilai_x

Tanda seru (!) mewakili negasi atau kebalikan.

Setelah membahas format penulisannya, kita langsung saja mengimplementasikan dari Toogle ini, program ini akan memunculkan atau menghilangkan tulisan sebagai reaksi dari di tekannya tombol.

Pada contoh program yang akan kita buat adalah, pada awalnya hanya ada Tombol, lalu jika kita klik tombol tsb maka akan muncul teks ‘ Memunculkan Teks’, dan jika kita menekan kembali tombol Toogle tsb. Maka teksnya akan hilang kembali.

Yuk langsung saja kita simak script dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Belajar Vue Js</title>
</head>
<body>
	<div id="app">
		<button @click='show=!show'>Toogle</button>
		<h3 v-show='show'>Memunculkan Teks</h3>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				show: false
			},
		});
	</script>
</body>
</html>

Semoga bermanfaat.