bind:value для текстовых полей ввода
Автоматически поддерживайте синхронизацию значений текстового ввода с переменными компонента
«bind:value для текстовых полей ввода» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Что делает bind:value
Директива bind:value создаёт двустороннюю связь между переменной и полем формы.
Базовый пример
Привяжите переменную, объявленную через let, к текстовому полю. Ввод с клавиатуры обновляет переменную, а программные изменения — поле.
<script>
let name = "";
</script>
<input bind:value={name} />
<p>Hello {name}</p>Сокращённая запись
Если переменная и атрибут имеют одно имя, правую часть можно опустить.
<input bind:value />Числовые поля
Для type="number" Svelte автоматически преобразует значение в число.
<input type="number" bind:value={age} />Поля диапазона
Ползунки работают так же и также преобразуют значение в число.
<input type="range" bind:value={volume} />Текстовые области
Привязывайте value к текстовым областям так же, как к полям ввода.
<textarea bind:value={comment}></textarea>Одиночный выбор
Для одиночного <select> привяжите value к значению выбранного варианта.
<select bind:value={color}>
<option>red</option>
<option>blue</option>
</select>Программное обновление
Присваивание значения связанной переменной немедленно обновляет поле ввода. Это удобно для кнопок очистки формы.
function clear() { name = ""; }Повторная отрисовка не нужна
Реактивность работает автоматически. Вам не нужно вызывать setState или вручную создавать привязку.
Проверка
Добавляйте реактивные инструкции, чтобы проверять данные по мере ввода.
$: isValid = email.includes("@");Устранение частых вызовов
Для ресурсоёмкой проверки используйте задержку внутри реактивной инструкции или такую утилиту, как lodash.debounce.
Быстрая проверка
Что делает bind:value?
Итоги
Используйте bind:value для двусторонней привязки поля с автоматическим приведением типов для числовых полей и полей диапазона.
Часто задаваемые вопросы
Урок «bind:value для текстовых полей ввода» бесплатный?
Да — полный текст урока «bind:value для текстовых полей ввода» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «bind:value для текстовых полей ввода»?
Автоматически поддерживайте синхронизацию значений текстового ввода с переменными компонента Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «bind:value для текстовых полей ввода»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- bind:value для текстовых полей ввода
- bind:checked для флажков
- bind:group для групп переключателей и флажков
- bind:this для ссылок на элементы DOM