Mengenal Conditional Directive v-show pada Vue.Js

Pada tutorial ini kita akan belajar tentang Conditional (pengandaian) Directive v-show 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.

Bermain dengan Saudara v-if, yaitu v-show

Sebelum membahas v-show, saya akan menjelaskan secara ringkas kembali tentang directive v-if. Conditional Directive v-if pada Vue.js secara default bernilai true untuk menampilkan data, dan bernilai false untuk menyembunyikan data. Sedangkan directive v-show digunakan untuk menampilkan element dalam suatu kondisi tertentu.

Jika teman-teman lupa dengan Directive v-if, kalian bisa cek kembali di postingan saya sebelumnya yang membahas Conditional Directive v-if .

Untuk lebih memudahkan kalian untuk mengenal Directive v-show pada Vue.js. Kita akan mendemonstrasikan Directive v-show pada Vue.js, kita akan membuat sesuatu yang simple, misal kita ingin membuat tampilan kondisional dimana tombol submit tidak akan muncul sebelum user mengisi textarea. Berikut contoh scriptnya:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
         <h1>Tuliskan pesan</h1>
         <textarea v-model="message"></textarea>
         <button v-show="message">Request</button>
         <pre>
            {{ $data }}
         </pre>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
      new Vue({
      el: '#app',
         data: {
            message: ''
         }
      })
   </script>
</body>
</html>

Contoh diatas kita memliki file HTML dengan div id=“app“ sebagai root vue dan menggunakan v-model pada textarea, agar setiap data yang berubah akan terupdate melalui vue-instance.

Lalu terdapat vue-show pada button, yang akan menampilkan button ketika textarea diisi. parameter vue-show bersifat true/false, pada saat v-model yaitu textarea kosong/null maka akan dianggap false.

Jadi untuk ringkasan penjelasannya adalah, directive v-show itu lebih digunakan untuk menampilkan/menyembunyikan element dalam suatu kondisi. Jika pada contoh diatas berarti ketika v-model yaitu textarea-nya kosong/null, maka directive v-show yaitu tag button tersebut akan dianggap FALSE, sehingga tombol tsb tidak akan muncul.