Skip to main content

Що робить модифікатор .number?

VueJunior~1 хв читання
Запропонувати правку

Модифікатор .number у директиві v-model автоматично перетворює введене користувачем значення на число перед записом у модель.

Простіше кажучи:

.number робить так, щоб значення, введене в input, перетворювалося з рядка на тип Number.

Як працює .number?

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

Користувач вводить:

"25"

У змінну age потрапить:

25 // число, а не рядок

Vue автоматично викличе Number(value) або аналогічне перетворення.

Приклад

vue
<input v-model.number="price" /> <p>Тип: {{ typeof price }}</p>

Користувач вводить:

"100"

Відобразиться:

Тип: number

Коли корисно використовувати .number?

1. Для числових полів форм

  • вік
  • ціна
  • розмір
  • кількість
  • рейтинг

2. Щоб уникнути помилок при порівнянні

js
"10" > "2" // true (лексичне порівняння) 10 > 2 // true

3. Щоб API отримувало правильний тип

Наприклад, backend очікує число:

json
{ "limit": 50 }

Але без .number ви б надіслали рядок "50".

4. Щоб уникнути кастомного приведення типу в коді

Замість:

js
age = Number(e.target.value)

Можна просто:

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

Важливі особливості

1. Якщо значення не можна перетворити на число

Наприклад, "abc" або порожній рядок "":

js
Number("abc") // NaN

У модель потрапить NaN.

2. Працює лише для input type="text" і подібних

Для input type="number" це зазвичай теж корисно, але потрібно враховувати HTML5-валідацію.

3. Не впливає на вивід - лише на збереження у змінну

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку