Mengenal Conditional Directive v-if pada Vue.js

Pada tutorial ini kita akan belajar tentang Conditional (pengandaian) Directive v-if pada Vue.js, Conditional dikenal juga dengan istilah ‘jika-maka’. Conditional pada Javascript merupakan suatu perintah yang digunakan untuk memilih satu aksi dari beberapa kemungkinan dengan syarat tertentu.

Conditional Directive v-if pada Vue.js secara default bernilai true untuk menampilkan data, dan bernilai false untuk menyembunyikan data, berikut contohnya:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="app">
		<b v-if="tampil"> {{ pesan }} </b>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		new Vue(
		{
			el: '#app',
			data: {
				tampil: true,
				pesan: 'belajar directive v-if vue.js'
			}
		})
	</script>
</body>
</html>

Maksud script di atas adalah, jika tampil adalah nilai true, maka tampilkan pesan. Hasilnya dapat dilihat pada browser. yaitu teks belajar directive v-if vue.js

Namun jika kita ubah nilai tampil menjadi false seperti contoh berikut:

<script type="text/javascript">
		new Vue(
		{
			el: '#app',
			data: {
				tampil: false,
				pesan: 'belajar directive v-if vue.js'
			}
		})
</script>

Maka tampilannya akan kosong atau teks belajar directive v-if vue.js tidak akan tampil.