Jika kita terbiasa menggunakan data tunggal, yang berarti satu data yang memiliki satu nilai, maka sekarang kita akan membahas Array pada Vue Js. Seperti yang kalian tahu, bahwa array dapat menampung beberapa nilai dan beberapa tipe data dalam satu variable data.
Array juga dapat menampung tipe-tipe data yaitu string, boolean, numerik, objek, dan yang lainnya.
Bagi teman-teman yang sudah mempelajari bahasa pemograman yang lainnya, mungkin kalian sudah tidak asing dengan array ya. Nah untuk format penulisan array pada Vue Js adalah:
|
1 |
nama_array: [data1, data2, data3, ..] |
Untuk data yang bertipe string, wajib diletakkan di dalam tanda petik.
Berikut ini kita akan mengimplementasikannya ya:
|
1 2 3 4 5 6 7 8 |
<script> new Vue ({ el: '#app', data: { mobil: ['porsche', 'ferari', 'lamborghini'] } }) </script> |
Untuk menampilkan data bertipe array, kalian perlu menggunakan nomor index yang merupakan nomor urutan data yang terdapat pada array, nilainya dimulai dari nol, atau saya biasa bilang angka normal dikurangi satu.
Untuk contoh script diatas, dapat diartikan menjadi:
- Mobil dengan nomor urut 0, adalah porsche, dapat ditulis dengan mobil[0].
- Mobil dengan nomor urut 1, adalah ferari, dapat ditulis dengan mobil[0].
Berikut ini implementasi program untuk menampilkan array:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <p>{{ mobil[0] }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue ({ el: '#app', data: { mobil: ['porsche', 'ferari', 'lamborghini'] } }) </script> </body> </html> |