Модификаторы v-model

v-model в Petite-Vue обеспечивает двустороннюю привязку данных между состоянием приложения и элементами формы. Использование модификаторов расширяет возможности стандартного v-model, позволяя автоматически преобразовывать данные при чтении или записи, а также управлять поведением привязки в зависимости от контекста.

.number — преобразование значений в число

Модификатор .number автоматически преобразует значение элемента формы к числу. Это особенно важно для элементов <input> с типом text или number, где значение по умолчанию является строкой.

<div v-scope="{ count: 0 }">
  <input v-model.number="count" type="number" />
  <p>Текущее значение: {{ count }}</p>
</div>

При вводе "42" в поле ввода переменная count станет числом 42, а не строкой "42".

Особенности:

  • Работает только с <input> и <textarea>.
  • Пробелы и пустые строки преобразуются в NaN.
  • Использование с типом number позволяет избежать ручного преобразования через parseInt или parseFloat.

.trim — удаление пробелов

Модификатор .trim удаляет начальные и конечные пробелы из строки перед записью значения в переменную состояния.

<div v-scope="{ username: '' }">
  <input v-model.trim="username" />
  <p>Имя пользователя: '{{ username }}'</p>
</div>

При вводе " admin " значение переменной username будет "admin".

Особенности:

  • Применяется только при записи в переменную состояния.
  • Не влияет на отображение значения в поле ввода, если оно было изменено программно.

.lazy — обновление данных по событию change

По умолчанию v-model обновляет переменную состояния при каждом событии input. Модификатор .lazy изменяет поведение: обновление происходит только при событии change, то есть после потери фокуса или подтверждения ввода пользователем.

<div v-scope="{ message: '' }">
  <input v-model.lazy="message" />
  <p>Сообщение: {{ message }}</p>
</div>

Особенности:

  • Уменьшает количество обновлений состояния при быстром вводе текста.
  • Полезен для полей, где моментальное реагирование на каждый символ не требуется.

Комбинирование модификаторов

Модификаторы можно комбинировать для создания более сложного поведения:

<div v-scope="{ age: 0 }">
  <input v-model.number.lazy="age" type="text" />
  <p>Возраст: {{ age }}</p>
</div>

В этом примере значение будет:

  1. Преобразовано в число при записи.
  2. Обновляться только после события change.

Особенности работы с различными типами элементов

  1. <input type="text"> и <textarea> Поддерживают все стандартные модификаторы: .trim, .number, .lazy.
  2. <input type="checkbox"> Значение привязывается к булевому состоянию. Модификатор .number может использоваться при массивной привязке для числовых значений.
  3. <input type="radio"> Привязка осуществляется к переменной состояния, совпадающей со значением value выбранного радио. Модификаторы .trim и .number работают при необходимости преобразования.
  4. <select> Работает с .number и .lazy. При множественном выборе следует учитывать, что значение становится массивом.

Внутренний механизм

v-model с модификаторами в Petite-Vue реализован через:

  1. Слушатели событий — .lazy меняет событие с input на change.
  2. Препроцессинг значения — .trim и .number изменяют значение перед записью в состояние.
  3. Двусторонняя реактивность — любые изменения состояния автоматически отражаются в DOM, если элемент поддерживает обратную привязку.

Практическое использование

  • Формы регистрации и авторизации: .trim предотвращает случайные пробелы в логине и пароле.
  • Числовые поля: .number упрощает работу с возрастом, ценами или количеством.
  • Производительные формы: .lazy сокращает количество лишних обновлений при сложных вычислениях или валидации.

Рекомендации по применению

  • Не использовать .number на полях, где допустимы пустые строки или нестандартные символы.
  • .trim применим только к строковым значениям; при комбинировании с .number сначала удаляются пробелы, затем выполняется преобразование в число.
  • Комбинация .lazy с .number или .trim подходит для полей, где важна чистота данных и минимизация обновлений состояния.
Оглавление