Latihan 1: Template Dasar — Vue

Latihan 1 dari materi Template Dasar di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah punya const nama = ref("Budi") dan const tahun = ref(2026), biarkan. Lengkapi template di dalam <div>:

Tambahkan <h1> yang berbunyi Halo, Budi!, dengan nama disisipkan lewat interpolasi: <h1>Halo, {{ nama }}!</h1>.
Tambahkan satu <p> yang berbunyi Tahun: 2026, dengan tahun lewat interpolasi: <p>Tahun: {{ tahun }}</p>.

Tulis cuma satu <p>, karena yang dicek <p> pertama di halaman.

Yang dicek:

<h1> berisi persis Halo, Budi!.
<p> berisi persis Tahun: 2026.
Script menyimpan nilainya di variabel bernama nama dan tahun.
Template menampilkan nama dan tahun lewat {{ }}, bukan diketik langsung.

Hint

Bagian kalimat yang tetap ditulis di template, dan cuma nilainya yang diambil dari data lewat kurawal ganda.
Di dalam div, h1 berisi kata Halo, koma, spasi, {{ nama }}, lalu tanda seru. Di bawahnya satu p berisi Tahun, titik dua, spasi, lalu {{ tahun }}.
<div> <h1>Halo, {{ nama }}!</h1> <p>Tahun: {{ tahun }}</p> </div>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Template Dasar — Vue

Hint

Memperbarui Aplikasi