Latihan 2: Styling Komponen — Vue

Latihan 2 dari materi Styling Komponen di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah punya const isActive = ref(true), biarkan. Di bawah garis ---template---, ganti komentar TODO dengan:

<div id="status" :class="{ active: isActive }">Online</div>

Class active terpasang selama isActive bernilai true.

Yang dicek:

#status berisi persis Online.
#status mendapat class active, dan :class-nya ditulis di <div id="status">.

Hint

Class yang datang dan pergi mengikuti data dipasang dengan :class berisi object: nama class sebagai properti, syaratnya sebagai nilai.
Object-nya punya satu properti, active, dengan nilai isActive. Teks di dalam div-nya Online.
<div id="status" :class="{ active: isActive }">Online</div>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Styling Komponen — Vue

Hint

Memperbarui Aplikasi