Latihan 1: Reactive Data — Vue

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

Buat counter yang angkanya ikut berubah di layar:

Di script, di atas garis ---template---, simpan count sebagai data reaktif yang mulai dari 0: const count = ref(0).
Di template, di dalam <div>, tampilkan count di <span id="count">{{ count }}</span>.
Tambahkan <button id="inc">+1</button> yang menaikkan count sebanyak 1 tiap diklik, misalnya @click="count++" (di template tanpa .value).

ref sudah tersedia di editor. Baris import boleh ditulis seperti di proyek sungguhan, tapi gak wajib.

Yang dicek:

Hint

Angka yang harus ikut berubah di layar disimpan di data reaktif, bukan di variabel biasa, supaya Vue tahu kapan harus merender ulang.
Buat const count = ref(0). Di template taruh {{ count }} di dalam span dengan id count, lalu buat button dengan id inc yang @click-nya menaikkan count.
const count = ref(0) lalu ---template--- lalu <div> <span id="count">{{ count }}</span> <button id="inc" @click="count++">+1</button> </div>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…