Директива v-model в Vue3

Vue3 内置指令Встроенные директивы Vue3

v-modelДиректива используется для создания двусторонней привязки данных на элементах ввода формы и компонентах.

Базовое описание

v-modelДиректива создаёт двустороннюю привязку данных на элементах формы и компонентах. Она автоматически выбирает правильный метод обновления элемента в зависимости от типа элемента управления.

  • Ожидаемый тип: зависит от типа элемента формы
  • Функция: создаёт двустороннюю привязку данных на элементах ввода формы и компонентах.

Базовое использование

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

Пример

<template>
  <div>
    <input v-model="message" placeholder="Содержимое ввода" />
    <p>Содержимое ввода: {{ message }}</p>
  </div>
</template>

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

2. Флажок

Пример

<template>
  <div>
    <input type="checkbox" id="agree" v-model="agreed" />
    <label for="agree">Я согласен с условиями</label>
    <p>Согласен: {{ agreed }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { agreed: false }
  }
}
</script>

Модификаторы

  • .lazy: Синхронизируется после события change (а не input)
  • .number: Автоматически преобразует в число
  • .trim: Автоматически удаляет начальные и конечные пробелы

Пример

<input v-model.lazy="lazyInput" placeholder="Синхронизация при потере фокуса" />
<input v-model.number="age" type="number" placeholder="Автоматическое преобразование в число" />
<input v-model.trim="username" placeholder="Удалить пробелы" />

Vue3 内置指令Встроенные директивы Vue3

Другие расширения