Latihan 1 dari materi Conditional Rendering di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal sudah punya const isLoggedIn = ref(true) dan, di dalam <div>, tombol #toggle yang membalik nilainya; biarkan. Di bawah tombol itu, ganti komentar TODO dengan dua paragraf:
<p id="msg" v-if="isLoggedIn">Selamat datang!</p><p id="msg" v-else>Silakan login.</p>Yang dicek:
#msg berisi persis Selamat datang!, karena isLoggedIn bernilai true.#toggle diklik, #msg berisi persis Silakan login.v-if dan v-else.<p id="msg"> yang ada di halaman. Dengan v-show dua-duanya tetap ada, jadi jangan pakai v-show.
