Latihan 1: Styling Komponen — Vue

Latihan 1 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 color = ref("blue"), biarkan. Di bawah garis ---template---, ganti komentar TODO dengan:

<div id="box" :style="{ color: color, padding: '20px' }">Kotak Biru</div>

Tulis padding-nya sebagai teks '20px'. Angka 20 tanpa satuan diabaikan.

Yang dicek:

#box berisi persis Kotak Biru.
Kodenya memakai :style.
Padding #box bernilai 20px.
Warna teks #box biru, dari ref color.

Hint

Gaya dari data diikat dengan :style berisi object, bukan teks CSS biasa di atribut style.
Object-nya punya dua properti: color yang membaca ref color, dan padding berisi teks '20px' lengkap dengan satuannya.
<div id="box" :style="{ color: color, padding: '20px' }">Kotak Biru</div>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Styling Komponen — Vue

Hint

Memperbarui Aplikasi