Penggunaan Directive V For Pada Vue Js

Kita akan melihat dan belajar directive lainnya yaitu untuk melakukan perulangan atau loop yang mana kita dapat menampilkan semua nilai array atau pun objectnya. Tentu untuk kasus ini saya berikan contohnya statis tapi teman teman berpikir ini bisa dilakukan dengan mengambil datanya melalui server lalu kita akan mendapatkan hasil response dalam bentuk JSON. Nah sebagai contoh saya akan buat property lessons didalam object datanya sebagai data array dari materinya yang isinya sebagai berikut

Penggunaan-Directive-V-For-Pada-Vue-Js-25-03-2017-1

nah misalnya saya ingin menampilkan semua daftar list dari data lessonsnya untuk itu kita akan tempatkan didalam tag listnya lalu dibagian listnya kita akan berikan directive v-for yang nilainya kita tulis nama-baru dan diikuti dengan keyword in lalu ada data array yang ingin ditampilkan pada kasus ini adalah variabel lessons sebagai berikut

Penggunaan-Directive-V-For-Pada-Vue-Js-25-03-2017-2

dan untuk mendapatkan datanya kita bisa tulis didalam kurung kurawal dua kali untuk menuliskan variabel nama-baru sebagai data arraynya seperti ini

Penggunaan-Directive-V-For-Pada-Vue-Js-25-03-2017-3

maka akan kita akan dapat hasil yang inginkan yaitu menampilkan nama materinyaa didalam elemen listnyaa.

Penggunaan-Directive-V-For-Pada-Vue-Js-25-03-2017-4

Jadi sangatlah simple caranya kita tinggal menggunakan metode v-for. Selain string atau pun array teman teman bisa menampilkan sebuah angka increment dengan menentukan nama variabel sebagai nama-baru lalu kita ingin melakukan perulangan sampai 5

Penggunaan-Directive-V-For-Pada-Vue-Js-25-03-2017-5

kita akan tulis variabel nama-barunya didalam sebuah kurung kurawalnya. Maka teman teman lihat dibagian browsernya akan melihat perulangan dari angka 0 sampai 4. Oke itu dia penggunaan directive v-for pada vuejs. Selamat mencoba

25 Maret 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