Какие поддерживаются модификаторы в модели?vue-24

В Vue.js модификаторы для v-model предоставляют возможность автоматически трансформировать значение при связывании данных. Вот основные поддерживаемые модификаторы:

1. .lazy

Изменяет поведение привязки данных: вместо обновления на каждом событии input (по умолчанию), обновление происходит по событию change.

Пример:

<input v-model.lazy="message">

• Без .lazy: обновляется при каждом нажатии клавиши.
• С .lazy: обновляется при потере фокуса (например, при нажатии Tab или клике вне поля).

2. .number

Автоматически преобразует введённое пользователем значение в число (если возможно). Если преобразование не удаётся, возвращается исходная строка.

Пример:

<input v-model.number="age" type="number">

• Ввод "25" → число 25
• Ввод "25abc" → строка "25abc"

3. .trim

Удаляет пробелы в начале и конце введённой строки.

Пример:

<input v-model.trim="username">

• Ввод " user " → сохраняется как "user"

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

Модификаторы можно комбинировать. Порядок применения: .trim → .number → .lazy.

Пример:

<input v-model.trim.number.lazy="value">

Особенности реализации

• Модификаторы работают только с элементами форм (input, textarea, select).
• Для кастомных компонентов можно определять собственные модификаторы через свойство model.modifiers.
• В Vue 3 поведение модификаторов остаётся аналогичным Vue 2.

Пример с кастомным компонентом

app.component('custom-input', {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  },
  template: ```<input :value="modelValue" @input="emitValue">```
})

Использование:

<custom-input v-model.capitalize="text" />

Резюмируем:

Vue предоставляет три основных модификатора (.lazy, .number, .trim) с чётко определённым поведением, а также механизм для создания собственных модификаторов в кастомных компонентах.