Belajar Tentang Directive Conditional Pada Vue js

Hai teman teman kita mau belajar tentang directive pada Vue JS. Directive simplenya adalah fungsi-fungsi yang sudah otomatis ada didalam Vue JSnya. Contoh directive disini ada banyak tapi salah satu yang akan kita bahas adalah Directive Conditional artinya kita bisa melakukan if else loop atau perulangan jadi sama seperti kita belajar bahasa pemrograman lainnnya. Tentu ada cara penulisannya masing masing. Sebagai contoh kita mau membuatkan directive if dengan v-if didalam elemenya sebagai berikut

Belajar Tentang Directive Conditional Pada Vue Js

Jadi selama kondisinya true maka dia akan menampilkan aksi atau proses yang ada diantaranya. Tapi kita pun bisa membuat property done didalam object datanya yang mana done ini adalah nilai booleannya false seperti berikut

Belajar-Dasar-Tentang-Directive-Conditional-Pada-Vue-Js-09-04-2017-2

Kita tahu bila nilainya false untuk directive v-ifnya

Belajar-Dasar-Tentang-Directive-Conditional-Pada-Vue-Js-09-04-2017-3

Maka tidak akan terjadi apa apa dan kalo teman teman klik kanan inspect elemen pada browsernya dan lihat struktur HTMLnya maka sekarang didalamnya tidak ada apa apa. Jadi bukan sekedar display none tapi elemenya benar benar hilang dari struktur HTMLnya. Tentu kita pun bisa menampilkan v-else. Tentu else tidak perlu syarat kita bisa menuliskan seperti ini

Belajar-Dasar-Tentang-Directive-Conditional-Pada-Vue-Js-09-04-2017-4

Maka kita akan dapat feedback atau pesan kalo property donenya bernilai false.

Belajar-Dasar-Tentang-Directive-Conditional-Pada-Vue-Js-09-04-2017-5

Tapi bila saya ubah menjadi true maka kita dapat hasil yang di inginkan. Jadi itu dia penggunaan if else sederhananya didalam Vuejs. Terima kasih

9 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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat