Справочник Vue

v-model: связываем форму и состояние

v-model объединяет передачу значения и обработку события ввода. Пользователь меняет поле — реактивное состояние обновляется, а новое состояние сразу отражается в поле.

Рабочий пример

<script setup>
import { ref } from "vue";
const name = ref("");
const age = ref(null);
</script>
<template>
  <input v-model.trim="name" placeholder="Имя">
  <input v-model.number="age" type="number">
  <p>{{ name }}, {{ age }}</p>
</template>

Модификатор trim убирает пробелы по краям, number преобразует значение в число, lazy обновляет его на change вместо каждого input.

Когда применять

v-model удобно для полей формы и небольших компонентов ввода. Серверная проверка всё равно обязательна, а ошибки нужно показывать рядом с полем.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

Частые ошибки

• Ожидать от number число при пустом поле во всех случаях
• Привязывать несколько источников к одному полю
• Заменять валидацию модификаторами