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

Belajar-Dasar-Tentang-Directive-V-Show-Pada-VueJs-15-04-2017-1

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

Belajar-Dasar-Tentang-Directive-V-Show-Pada-VueJs-15-04-2017-2

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

Belajar-Dasar-Tentang-Directive-V-Show-Pada-VueJs-15-04-2017-3

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

Belajar-Dasar-Tentang-Directive-V-Show-Pada-VueJs-15-04-2017-4

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.

Belajar-Dasar-Tentang-Directive-V-Show-Pada-VueJs-15-04-2017-5

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

15 April 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat