Cara Membuat List di VUE
List looping ini maksudnya kalian membuat sebuah daftar yang mana akan kita looping (berulang), kenapa berulang ? karena pasti kalian capek dong, kalau harus di tulis satu - persatu, nah jadi kita hanya memanggil array-nya, maka semua-nya akan terpanggil.
Listnya akan kita tulis nama - nama makanan dan menggunakan syntax ol li, yang mana akan menggunakan angka. Contohnya seperti dibawah ini ya
- nasi padang
- nasi goreng
- nasi uduk
Seperti biasa kalian membuat file-nya terlebih dahulu dengan nama latihan-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Membuat Daftar Makanan Indonesia</title>
</head>
<body>
<div id="root">
<ol>
<!-- v-for adalah looping dari vue -->
<!-- Jadi perintahnya adalah "tolong tampilkan text mkn yang ada di dalam data makanan-->
<li v-for="mkn in makanan" v-text="mkn"></li>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
const app = new Vue ({
// element yang kita panggil adalah <div id="root"></div>
el: '#root',
data: {
// kita buat array, array ini ada data dengan nama makanan
makanan: ['nasi padang', 'nasi goreng', 'nasi uduk']
}
});
</script>
</body>
</html>
Om bewok mau nanya dong, kalau mau nambahin makanannya bisa ga ? jangan cuman 3 aja, soalnya kan aku hobi-nya makan, pasti makanan kesukaanku lebih dari itu ?
Bisa dong, oleh karena itu kita menggunakan form input lalu ada buttonnya, jadi ketika dia ingin menambahkan makanannya, kita hanya masukin makanannya melalaui input, lalu tinggal klik buttonnya. Kita sebut button event click listener, ini adalah sebuah function ketika kita klik button tersebut, dia akan melakukan aksi atau tergantung apa yang kita perintahkan
Untuk menambahkan data kita menggunakan method push yang fungsinya untuk menambahkan data pada list tersebut.
Langsung saja kita buat file dengan nama input-list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input data makanan</title>
</head>
<body>
<div id="root">
<ol>
<!-- kita buat looping dengan menggunakan v-for -->
<li v-for="mkn in makanan" v-text="mkn"></li>
</ol>
<!-- kita tambahkan model tambahMakanan -->
<input type="text" id="input" v-model="tambahMakanan">
<!-- kita tambahkan event listener dengan nama add -->
<button @click="add">Tambah Makanan</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
const app = new Vue ({
el: '#root',
data : {
tambahMakanan : '',
makanan : ['nasi padang', 'nasi goreng', 'nasi uduk']
},
methods: {
// add kita dapat dari event listener button
add() {
// kita gunakan method push ke tambahMakanan yakni model dari input
this.makanan.push(this.tambahMakanan);
// setelah kita tambahkan, kita clear / kosongkan input tambahMakanan
this.tambahMakanan = '';
}
}
})
</script>
</body>
</html>Hasilnya seperti dibawah ini
Selanjutnya di kita akan belajar mengenai Attribut dan Class di Vue 2 Part 3
No comments:
Post a Comment