Vue Academy · Урок

v-model для всех элементов формы

Input, textarea, select, checkbox, radio — как v-model адаптируется к каждому типу элемента

«v-model для всех элементов формы» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Привязка элементов form

v-model создаёт двустороннюю привязку между элементами управления form и Вашим реактивным состоянием. Каждый тип элемента управления — текстовый input, флажок, переключатель, список выбора и многострочное поле — немного по-своему использует v-model. В этом уроке рассмотрены все варианты.

Текстовый ввод

Для текстового input v-model связывает значение и обновляет его при вводе. Введите текст в поле box, и реф будет обновляться в реальном времени.

<script setup>
import { ref } from 'vue'
const name = ref('')
</script>

<template>
  <input v-model="name" />
  <p>Hello, {{ name }}</p>
</template>

Многострочное поле

Многострочное поле работает так же, как текстовый input. Используйте v-model непосредственно на элементе — не помещайте текст между тегами.

<template>
  <textarea v-model="message"></textarea>
</template>

Флажок: логическое значение

Один флажок, связанный с логическим рефом, переключается между true и false.

<script setup>
import { ref } from 'vue'
const agreed = ref(false)
</script>

<template>
  <input type="checkbox" v-model="agreed" />
  <p>Agreed: {{ agreed }}</p>
</template>

Флажок: несколько значений в массиве

Свяжите несколько флажков с одним рефом-массивом. Каждый отмеченный флажок добавляет своё value в массив.

<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>

Радиокнопки

Радиокнопки одной группы используют общий реф. В рефе хранится value выбранного варианта.

<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>

Список выбора: один вариант

Одиночный список выбора связывается со значением, соответствующим выбранному варианту. При желании добавьте вариант-подсказку с пустым значением.

<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>

Список выбора: несколько вариантов

Добавьте атрибут multiple и свяжите элемент с массивом. Выбранные варианты будут собираться в массиве.

<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>

Модификаторы значения

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

<input v-model.number="age" />
<input v-model.trim="username" />
<input v-model.lazy="note" />

Одна мысленная модель

Независимо от элемента управления привязка означает: значение передаётся внутрь, а изменения — наружу. Тип элемента управления определяет только форму значения: логическое значение, строку или массив.

Пользовательские компоненты ввода

v-model работает и с собственными компонентами. Пользовательский элемент ввода объявляет свойство modelValue и отправляет событие update:modelValue, поэтому для родительского компонента ведёт себя как обычный элемент управления.

<!-- parent -->
<MyTextInput v-model="name" />

<!-- child declares modelValue + emits update:modelValue -->

Быстрая проверка

Проверьте свои знания о привязке элементов form.

Итоги

Использование двусторонней привязки в элементах form:

Текстовые поля и многострочные поля связываются со строкой.
Один флажок связывается с логическим значением, а несколько флажков — с массивом.
Радиокнопки используют общий реф, в котором хранится выбранное значение.
Список выбора связывается со значением, а с атрибутом multiple — с массивом.
Модификаторы: .trim, .number, .lazy.

Часто задаваемые вопросы

Урок «v-model для всех элементов формы» бесплатный?

Да — полный текст урока «v-model для всех элементов формы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «v-model для всех элементов формы»?

Input, textarea, select, checkbox, radio — как v-model адаптируется к каждому типу элемента Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «v-model для всех элементов формы»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy