Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить модифікатор .number?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Модифікатор `.number`** у директиві v-model автоматично перетворює введене користувачем значення на число перед записом у модель. **Ключове:** якщо значення не можна перетворити на число (наприклад, "abc"), у модель потрапить NaN.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняМодифікатор `.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. Не впливає на вивід - лише на збереження у зміннуДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.