Vue Academy · Pelajaran

Kondisional dan Perulangan

Render secara kondisional dengan v-if dan render daftar dengan v-for.

Kondisional dan Perulangan adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.

Tampilan Bersyarat

Vue memungkinkan Anda menampilkan atau menyembunyikan bagian antarmuka berdasarkan data.

v-if menampilkan elemen secara bersyarat
v-else-if dan v-else merangkai kondisi
v-show mengubah visibilitas

v-if

Direktif v-if menampilkan elemen hanya ketika ekspresinya bernilai benar.

<p v-if="isLoggedIn">Welcome back!</p>
<p v-if="cart.length === 0">Your cart is empty.</p>

v-else-if dan v-else

Rangkai kondisi dengan v-else-if dan v-else. Keduanya harus langsung mengikuti v-if.

<p v-if="score >= 90">Grade: A</p>
<p v-else-if="score >= 80">Grade: B</p>
<p v-else-if="score >= 70">Grade: C</p>
<p v-else>Grade: F</p>

v-show

v-show selalu menampilkan elemen, tetapi mengubah properti tampilan CSS-nya.

<div v-show="isVisible">
  This div stays in the DOM,
  only display:none toggles.
</div>

v-if vs v-show

Perbedaan utamanya:

v-if menambahkan atau menghapus elemen sepenuhnya dari DOM
v-show mempertahankan elemen di dalam DOM dan hanya mengubah tampilannya

Gunakan v-show untuk hal-hal yang sering diubah tampilannya. Gunakan v-if ketika kondisi jarang berubah atau elemennya membutuhkan banyak sumber daya.

v-for pada Larik

Direktif v-for menampilkan daftar dengan mengiterasi sebuah larik.

<ul>
  <li v-for="fruit in fruits">{{ fruit }}</li>
</ul>

<!-- data: fruits = ["Apple", "Banana", "Cherry"] -->

v-for dengan Indeks

v-for juga dapat memberikan indeks setiap item.

<ul>
  <li v-for="(item, index) in items">
    {{ index }}: {{ item }}
  </li>
</ul>

Pentingnya :key

Selalu berikan :key yang unik saat menggunakan v-for.

Ini membantu Vue melacak identitas setiap simpul
Memungkinkan pembaruan DOM yang efisien dan benar
Gunakan id unik yang stabil, bukan indeks larik, ketika item diurutkan ulang

<li v-for="user in users" :key="user.id">
  {{ user.name }}
</li>

Mengapa :key Penting

Tanpa key yang baik, Vue mungkin menggunakan kembali elemen yang salah ketika daftar berubah.

Kolom masukan formulir dapat mempertahankan nilai yang salah
Animasi dapat mengalami gangguan
Status dapat terhubung ke baris yang salah

Key yang stabil dan unik mencegah bug tersebut.

v-for pada Objek

v-for dapat mengiterasi nilai properti objek, dengan key dan indeks yang bersifat opsional.

<li v-for="(value, key) in userProfile" :key="key">
  {{ key }}: {{ value }}
</li>

<!-- userProfile = { name: "Ada", age: 36 } -->

Menggabungkan v-for dan Kondisi

Untuk memfilter daftar, utamakan properti terhitung daripada menempatkan v-if pada elemen yang sama dengan v-for.

<!-- Filter in a computed, then loop -->
<li v-for="task in activeTasks" :key="task.id">
  {{ task.title }}
</li>

<!-- activeTasks is a computed that
     returns only unfinished tasks -->

Pemeriksaan Singkat

Uji pemahaman Anda tentang kondisi dan perulangan.

Rangkuman: Kondisi dan Perulangan

Anda telah mempelajari tampilan daftar dan tampilan bersyarat:

v-if / v-else-if / v-else menampilkan elemen secara bersyarat
v-show hanya mengubah tampilan
v-for mengiterasi larik dan objek
Selalu tambahkan :key yang unik
Filter daftar dengan properti terhitung

Berikutnya: pengikatan atribut dan kelas.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Kondisional dan Perulangan” gratis?

Ya — teks lengkap “Kondisional dan Perulangan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Kondisional dan Perulangan”?

Render secara kondisional dengan v-if dan render daftar dengan v-for. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.

Berapa lama pelajaran “Kondisional dan Perulangan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy