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:

 

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.