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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!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.