Melooping Data Array Menggunakan Vue JS

18/12/2019    Shelli Ripati    185     Website

Haloo teman-teman Dumet School, Buat kalian yang sedang dan ingin belajar vue js pada kesempatan kali ini saya akan membahas tentang cara Melooping Data Array Menggunakan Vue JS. Nah sebelum kita buat scriptnya saya akan menjelaskan terlebih dahulu arti dari looping. looping adalah perulangan dimana kita akan mencetak semua data yang ingin dicetak dengan menggunakan looping. Didalam Vue JS untuk melakukan cetak semua data dengan looping sangat mudah karena cukup menggunakan fungsi dari directive v-for yang ada di Vue Js maka data akan tercetak semua.

Langkah pertama untuk dapat Melooping Data Array Menggunakan Vue JS yaitu teman-teman sematkan terlebih dahulu link library dari vue js seperti di bawah ini.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Jika sudah maka tahap selanjutnya saya akan membuat suatu objek yang berisi data array yang nanti akan kita looping menggunakan v-for pada Vue Js. Dan berikut ini adalah scriptnya

<script type="">
            var app = new Vue({
                el: "#apps",
                data: {
                    paket: ["webmaster Premium", "webmaster Advanced", "webmaster Profesional", "webmaster Ultimate"]
                }
            })
        </script>

Dan tahap selanjutnya teman-teman buat struktur htmlnya dengan langsng menggunakan v-for untuk mencetak data array yang sudah di buat sebelumnya. Cara menggunakan v-for yaitu di tulis dengan nama alias terlebih dahulu lalu di sambung dengan in dan kemudian nama array seperti ini "pk in paket". Dan berikut ini script html yang sudah di cetak data array dengan menggunakan directive v-for pada Vue Js.

<!DOCTYPE html>
<html>
<head>
    <title>Melooping Data Array Menggunakan Vue JS</title>
    <style type="">
        #apps{
            background: salmon;
            color:darkblue;
            width: 800px;
            margin: auto;
            padding: 20px;
            font-size: 20px;
        }
    </style>
</head>
<body>
        <div id="apps">    
            <ul>
                <li v-for="pk in paket">{{pk}}</li>
            </ul>
        </div>

</body>

</html>

Lalu nama alias tersebut di cetak dengan menggunakan kurung kurawel ganda. 

Demikian artikel tentang cara Melooping Data Array Menggunakan Vue JS. Cukup simpel dan mudah bukan?. Semoga artikel ini dapat bermanfaat buat teman-teman Dumet School. Selamat mencoba

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More