bind:value para entradas de texto
Mantenha automaticamente os valores das entradas de texto sincronizados com as variáveis do componente.
bind:value para entradas de texto é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
O que bind:value faz
A diretiva bind:value cria uma conexão bidirecional entre uma variável e um campo de entrada de formulário.
Exemplo básico
Vincule uma variável let a um campo de texto. Digitar atualiza a variável; alterações programáticas atualizam o campo.
<script>
let name = "";
</script>
<input bind:value={name} />
<p>Hello {name}</p>Forma abreviada
Se a variável e o atributo tiverem o mesmo nome, omita o lado direito.
<input bind:value />Campos numéricos
Para type="number", o Svelte converte automaticamente o valor para um número.
<input type="number" bind:value={age} />Campos de intervalo
Os controles deslizantes funcionam da mesma forma e também convertem o valor para um número.
<input type="range" bind:value={volume} />Áreas de texto
Vincule value em áreas de texto da mesma forma que em campos de entrada.
<textarea bind:value={comment}></textarea>Seleção única
Para um <select> único, vincule o valor ao valor da opção selecionada.
<select bind:value={color}>
<option>red</option>
<option>blue</option>
</select>Atualização programática
Atribuir um valor à variável vinculada atualiza o campo imediatamente. É útil para botões de limpar o formulário.
function clear() { name = ""; }Não são necessárias novas renderizações
A reatividade é automática. Você nunca chama setState nem refaz a vinculação manualmente.
Validação
Adicione instruções reativas para validar enquanto o usuário digita.
$: isValid = email.includes("@");Debounce
Para validações dispendiosas, aplique debounce dentro de uma instrução reativa ou use um utilitário como lodash.debounce.
Verificação rápida
O que bind:value faz?
Recapitulação
Use bind:value para vincular campos de entrada nos dois sentidos, com conversão automática de tipo em campos numéricos e de intervalo.
Perguntas Frequentes
A aula “bind:value para entradas de texto” é grátis?
Sim — o texto completo de “bind:value para entradas de texto” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “bind:value para entradas de texto”?
Mantenha automaticamente os valores das entradas de texto sincronizados com as variáveis do componente. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “bind:value para entradas de texto”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- bind:value para entradas de texto
- bind:checked para caixas de seleção
- bind:group para grupos de opções e caixas de seleção
- bind:this para referências a elementos do DOM