Ответ
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 опцию.
Ответ 18+ 🔞
Э, слушай, а вот этот твой v-model в Vue.js — это ж просто магия какая-то, в рот меня чих-пых! Ну реально, чтобы не пиздеть руками.
Представь: у тебя есть инпут на странице и какая-то переменная в коде. Ты хочешь, чтобы когда юзер тыкает по клавишам, переменная тут же обновлялась. И наоборот — если ты в коде переменную поменял, чтобы в инпуте текст автоматом поменялся. Так вот, v-model — это и есть та самая волшебная хуйня, которая это делает. Одна строчка, и всё, пиздец.
Смотри, как просто:
<template>
<input v-model="message" placeholder="Ну вводи чё-нибудь, не стесняйся">
<p>А вот что ты ввёл, глянь: {{ message }}</p>
</template>
<script>
export default {
data() {
return {
message: '' // Тут изначально пусто, как твои обещания в понедельник
}
}
}
</script>Всё! Ты в инпут пишешь — снизу текст появляется. Изменил переменную message в скрипте — инпут сам обновится. Красота, ёпта!
А если без этой магии, то пришлось бы городить огород:
<input
:value="message"
@input="message = $event.target.value"
>То есть вручную привязать значение через :value и ловить каждое изменение через @input, чтобы записать новое значение обратно в переменную. Скучно, блядь, много букв. v-model делает ровно то же самое, но ты пишешь меньше, а выглядишь умнее.
Под капотом эта директива просто умная сука: для инпутов и текстовых полей она использует свойство value и событие input, а для чекбоксов или селектов — checked и change. А если ты свои компоненты пишешь, так там вообще можно настроить, как эта связка будет работать, через опцию model. Но это уже для гиков, которым неймётся.