Ответ
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
опцию.