v-model em todos os elementos de formulário
Input, textarea, select, checkbox e radio — como v-model se adapta a cada tipo de elemento.
v-model em todos os elementos de formulário é uma aula grátis de Vue 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 Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
Vinculação dos campos de form
v-model cria uma vinculação bidirecional entre os controles de form e seu estado reativo. Cada tipo de controle — texto, caixa de seleção, opção, seleção e área de texto — usa v-model de uma maneira um pouco diferente. Esta lição aborda todos eles.
Campo de texto
Em um campo de texto, v-model vincula o valor e o atualiza durante a entrada. Digite na caixa e a referência será atualizada em tempo real.
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>
<template>
<input v-model="name" />
<p>Hello, {{ name }}</p>
</template>Área de texto
Uma área de texto funciona exatamente como um campo de texto. Use v-model diretamente no elemento — não coloque texto entre as tags.
<template>
<textarea v-model="message"></textarea>
</template>Caixa de seleção: booleano
Uma única caixa de seleção vinculada a uma referência booleana alterna entre true e false.
<script setup>
import { ref } from 'vue'
const agreed = ref(false)
</script>
<template>
<input type="checkbox" v-model="agreed" />
<p>Agreed: {{ agreed }}</p>
</template>Caixa de seleção: várias em uma matriz
Vincule várias caixas de seleção à mesma referência de matriz. Cada caixa marcada adiciona seu value à matriz.
<script setup>
import { ref } from 'vue'
const hobbies = ref([])
</script>
<template>
<input type="checkbox" value="reading" v-model="hobbies" />
<input type="checkbox" value="coding" v-model="hobbies" />
<p>{{ hobbies }}</p>
</template>Botões de opção
Os botões de opção de um grupo compartilham uma única referência. A referência contém o value da opção selecionada.
<script setup>
import { ref } from 'vue'
const picked = ref('')
</script>
<template>
<input type="radio" value="small" v-model="picked" />
<input type="radio" value="large" v-model="picked" />
<p>Picked: {{ picked }}</p>
</template>Seleção: única
Uma seleção única é vinculada a um valor que corresponde à opção escolhida. Se quiser, forneça uma opção de preenchimento com valor vazio.
<script setup>
import { ref } from 'vue'
const city = ref('')
</script>
<template>
<select v-model="city">
<option value="">Choose</option>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
</template>Seleção: múltipla
Adicione o atributo multiple e vincule-o a uma matriz. As opções selecionadas são reunidas na matriz.
<script setup>
import { ref } from 'vue'
const cities = ref([])
</script>
<template>
<select v-model="cities" multiple>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
</template>Modificadores de valor
Os modificadores refinam v-model: .trim remove espaços em branco, .number converte para um número e .lazy sincroniza durante a alteração, em vez de a cada tecla pressionada.
<input v-model.number="age" />
<input v-model.trim="username" />
<input v-model.lazy="note" />Um único modelo mental
Independentemente do controle, v-model recebe um valor e o devolve quando há uma alteração. O tipo de controle apenas determina o formato do valor: um booleano, uma string ou uma matriz.
Componentes de campo personalizados
v-model também funciona em seus próprios componentes. Um campo de entrada personalizado declara uma propriedade modelValue e emite update:modelValue, comportando-se como um controle nativo para o componente pai.
<!-- parent -->
<MyTextInput v-model="name" />
<!-- child declares modelValue + emits update:modelValue -->Verificação rápida
Teste sua compreensão da vinculação de form.
Recapitulação
v-model em todos os controles de form:
- Campos de texto e áreas de texto vinculam uma string.
- Uma única caixa de seleção vincula um booleano; várias caixas de seleção vinculam uma matriz.
- Os botões de opção compartilham uma referência que contém o valor selecionado.
- Uma seleção vincula um valor; com
multiple, vincula uma matriz. - Modificadores:
.trim,.number,.lazy.
Perguntas Frequentes
A aula “v-model em todos os elementos de formulário” é grátis?
Sim — o texto completo de “v-model em todos os elementos de formulário” é 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 Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “v-model em todos os elementos de formulário”?
Input, textarea, select, checkbox e radio — como v-model se adapta a cada tipo de elemento. Você pratica Vue 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 Vue Academy?
Nenhuma experiência prévia é necessária. Vue 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 “v-model em todos os elementos de formulário”?
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 Vue Academy?
Sim. Cada aula de Vue 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
- v-model em todos os elementos de formulário
- Envio e redefinição de formulários
- Padrões de validação manual
- VeeValidate para validação baseada em esquemas