Что такое v-model

Ответ

v-model — это директива в Vue.js, которая создаёт двустороннюю привязку данных между элементом формы (input, select, textarea) и свойством компонента. Она автоматически синхронизирует значение элемента с данными Vue.

Как работает:

  • При изменении поля формы (например, ввод текста) — обновляет связанное свойство.
  • При изменении свойства в коде — обновляет значение в поле формы.

Пример:

<template>
  <input v-model="message" placeholder="Введите текст">
  <p>Вы ввели: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

Эквивалент без v-model:

<input 
  :value="message" 
  @input="message = $event.target.value"
>

Под капотом v-model использует value (или checked для чекбоксов) и событие input (или change для некоторых элементов). Для компонентов можно кастомизировать через model опцию.