bind:value untuk Input Teks
Jaga agar nilai input teks tetap sinkron dengan variabel komponen secara otomatis.
bind:value untuk Input Teks adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Fungsi bind:value
Direktif bind:value membuat koneksi dua arah antara variabel dan bidang masukan formulir.
Contoh Dasar
Ikat variabel let ke masukan teks. Pengetikan memperbarui variabel, sedangkan perubahan terprogram memperbarui bidang tersebut.
<script>
let name = "";
</script>
<input bind:value={name} />
<p>Hello {name}</p>Bentuk Singkat
Jika variabel dan atribut memiliki nama yang sama, hilangkan sisi kanan.
<input bind:value />Masukan Angka
Untuk type="number", Svelte secara otomatis mengubah nilai menjadi angka.
<input type="number" bind:value={age} />Masukan Rentang
Penggeser bekerja dengan cara yang sama dan juga mengubah nilai menjadi angka.
<input type="range" bind:value={volume} />Area Teks
Ikat value pada area teks seperti pada masukan biasa.
<textarea bind:value={comment}></textarea>Pilihan Tunggal
Untuk satu <select>, ikat value ke nilai opsi yang dipilih.
<select bind:value={color}>
<option>red</option>
<option>blue</option>
</select>Pembaruan Terprogram
Menetapkan nilai ke variabel yang diikat akan segera memperbarui masukan. Berguna untuk tombol pengosong formulir.
function clear() { name = ""; }Tidak Perlu Merender Ulang
Reaktivitas berlangsung otomatis. Anda tidak perlu memanggil setState atau mengikat ulang secara manual.
Validasi
Tambahkan pernyataan reaktif untuk memvalidasi saat pengguna mengetik.
$: isValid = email.includes("@");Penundaan
Untuk validasi yang mahal, lakukan penundaan di dalam pernyataan reaktif atau gunakan utilitas seperti lodash.debounce.
Pemeriksaan Singkat
Apa yang dilakukan oleh bind:value?
Ringkasan
Gunakan bind:value untuk pengikatan masukan dua arah dengan pengubahan tipe otomatis pada masukan angka dan rentang.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “bind:value untuk Input Teks” gratis?
Ya — teks lengkap “bind:value untuk Input Teks” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “bind:value untuk Input Teks”?
Jaga agar nilai input teks tetap sinkron dengan variabel komponen secara otomatis. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “bind:value untuk Input Teks” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- bind:value untuk Input Teks
- bind:checked untuk Kotak Centang
- bind:group untuk Grup Radio dan Kotak Centang
- bind:this untuk Referensi Elemen DOM