bind:value untuk Input Teks
Pastikan nilai input teks sentiasa selaras dengan pemboleh ubah komponen secara automatik.
bind:value untuk Input Teks ialah pelajaran Sveltejs Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Sveltejs Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Sveltejs Academy merangkumi sejumlah 4 pelajaran.
Fungsi bind:value
Arahan bind:value mewujudkan sambungan dua hala antara pemboleh ubah dengan input borang.
Contoh Asas
Ikat pemboleh ubah let pada input teks. Menaip akan mengemas kini pemboleh ubah; perubahan terprogram akan mengemas kini medan tersebut.
<script>
let name = "";
</script>
<input bind:value={name} />
<p>Hello {name}</p>Bentuk Ringkas
Jika pemboleh ubah dan atribut berkongsi nama, abaikan bahagian kanan.
<input bind:value />Input Nombor
Untuk type="number", Svelte menukar nilai kepada nombor secara automatik.
<input type="number" bind:value={age} />Input Julat
Peluncur berfungsi dengan cara yang sama dan turut menukar nilai kepada nombor.
<input type="range" bind:value={volume} />Kawasan Teks
Ikat value pada kawasan teks sama seperti pada input.
<textarea bind:value={comment}></textarea>Pilih Satu
Untuk satu <select>, ikat nilai kepada nilai pilihan yang dipilih.
<select bind:value={color}>
<option>red</option>
<option>blue</option>
</select>Kemas Kini Terprogram
Menetapkan pemboleh ubah yang diikat akan mengemas kini input dengan serta-merta. Berguna untuk butang mengosongkan borang.
function clear() { name = ""; }Tiada Pemaparan Semula Diperlukan
Kereaktifan berlaku secara automatik. Anda tidak perlu memanggil setState atau mengikat semula secara manual.
Pengesahan
Tambahkan pernyataan reaktif untuk mengesahkan input semasa pengguna menaip.
$: isValid = email.includes("@");Pendebounan
Untuk pengesahan yang mahal, lakukan pendebounan dalam pernyataan reaktif atau gunakan utiliti seperti lodash.debounce.
Semakan Pantas
Apakah fungsi bind:value?
Ringkasan
Gunakan bind:value untuk pengikatan input dua hala dengan penukaran jenis automatik pada input nombor dan julat.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Soalan Lazim
Adakah pelajaran “bind:value untuk Input Teks” percuma?
Ya — teks penuh “bind:value untuk Input Teks” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Sveltejs Academy, tingkat taraf kepada CoddyKit PRO. Kursus Sveltejs Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “bind:value untuk Input Teks”?
Pastikan nilai input teks sentiasa selaras dengan pemboleh ubah komponen secara automatik. Anda berlatih Sveltejs Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Sveltejs Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Sveltejs Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “bind:value untuk Input Teks” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- bind:value untuk Input Teks
- bind:checked untuk Kotak Tanda
- bind:group untuk Kumpulan Radio dan Kotak Tanda
- bind:this untuk Rujukan Elemen DOM