Latihan 2: Render Functions — Vue

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

Heading yang tag-nya ditentukan data, ditulis di template dengan <component :is>. Starter-nya sudah punya const level = ref(2); angka itu tetap.

Di script, buat const tag = computed(() => "h" + level.value).
Di template, tulis <component :is="tag" id="heading">Heading Level {{ level }}</component>.

Yang dicek:

#heading berisi Heading Level 2 (hasilnya <h2 id="heading">).
Kodenya memuat component.
Kodenya memuat :is.

Versi render function-nya h("h" + level, "Heading Level " + level); di sini cukup template.

Hint

Nama tag-nya teks yang dirangkai dari huruf h dan angka level, jadi dia nilai turunan dari level.
Buat computed tag yang mengembalikan "h" + level.value. Di template, <component> dengan :is berisi tag, id heading, dan teks Heading Level diikuti {{ level }}.
const tag = computed(() => "h" + level.value) lalu <component :is="tag" id="heading">Heading Level {{ level }}</component>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Render Functions — Vue

Hint

Memperbarui Aplikasi