Belajar Dasar Tentang Directive V Show Pada Vue Js

Halo teman teman semuanya masih seputar artikel tentang Vue js dan masih menjelaskan tentang directive. Ada satu directive lagi yang bisa kita gunakan yaitu menambahkan directive v-show. v-show sama seperti v-if tentu ada yang sedikit berbeda bila kita gunakan v-show. Dengan v-show bila nilai donenya false sebagai berikut

Maka dia akan hilang tapi kalo teman teman lihat dibagian struktur elemenya. Elemenya masih ada begitu pun textnya masih bisa kita lihat

Karena dengan v-show dia memberikan css yakni display none. Kesimpulannya bila kita gunakan v-if maka dia akan merender ulang dengan menghilangkan total elemenya sedangkan v-show dia hanya memainkan nilai dari CSSnya. Tentu bila kondisi kita bernilai false atau salah. Oke Itu dia tentang penggunaan v-if v-else dan v-show. Sebagai tambahan kita pun bisa memberikan nilai negasi dengan simbol (!) tanda seru yang artinya tidak false berarti sekarang nilainya true

Maka kita akan dapat hasilnya datanya tapi kalo saya ubah menjadi true artinya not true atau false maka akan tampil pesan error kalo datanya is empty. Ataupun teman teman juga bisa melakukan sintaks seperti ini didalam directive v-shownya

Artinya jumlah data arraynya harus lebih besar dari 0. Maka kita mau tampilkan hasil datanya. Jadi kita bisa mendapatkan nilai jumlah array semuanya dengan metode length yang mana metode tersebut dari metode javascriptnya. Tentu kalo kita jalankan kode berikut kita dapat hasilnya list materinya dan begitu pun sebaliknya.

Oke itu dia kita tentang salah satu directive yang bisa kita gunakan tentu directive didalam Vue js ada banyak sekali. Tapi dibagian ini kita spesifik menjelaskan directive conditional pada Vuejs. Terima kasih