Модификатор номера привязки формы ввода Vue.js

Опубликовано: 11 Августа, 2022

Vue.js — это прогрессивная среда JavaScript для разработки пользовательских веб-интерфейсов. Это эффективная, доступная и универсальная структура. Мы можем создавать одностраничные приложения, а также приложения полного стека. Он построен на основе HTML, CSS и Javascript, что упрощает разработчикам интеграцию Vue.js в любое приложение на любом этапе.

Связывание входного значения формы обрабатывается директивой v-model , которая помогает связать статические строки, чтобы упростить привязку входного значения. Модификатор чисел автоматически обрабатывает ввод чисел и изменяет строковый ввод на числовой ввод, что не требует дальнейшей обработки. Это позволяет нам хранить значения в виде чисел, таких как цена товара и т. д.

Модификатор числа применим к входному элементу числового типа. Это не работает для элементов ввода текстового типа . Модификаторы помогают преобразовать ввод пользователя в пригодную для использования форму, а в Vue.js реализация модификаторов очень проста.

Синтаксис: измените элемент ввода на тип v-model на номер следующим образом:

<input type="number" v-model.number="value" />

Пример . В следующем примере у нас есть элемент ввода для ввода чисел, и число отображается с использованием v-модели . Модификатор числа изменяет ввод строки путем приведения типа к числовому формату.

Шаг 1. Создайте новый проект Vue.js с помощью диспетчера пакетов npm node.js, используя следующую команду.

npm init vue@latest

Введите имя проекта и предустановите проект следующим образом:

Структура проекта: После успешной установки будет сформирована следующая структура проекта.

Шаг 2. В файле App.vue добавьте значение члена данных для хранения значения и запишите элемент ввода с модификатором числа.

App.vue

<script>
  export default {
    data() {
      return {
        value: 0,
      };
    },
  };
</script>
  
<template>
  <center>
    <h1 style="text-align: center; 
        color: green">
       GeeksforGeeks
    </h1>
    <strong>
        Vue.js Form Input Binding number Modifier
    </strong>
    <br />
  </center>
  <center>
    <p>Numerical value: {{ value }}</p>
    <input type="number"
           v-model.number="value" />
  </center>
</template>

Шаг 3: Запустите проект с помощью следующей команды и посмотрите результат.

npm run dev

После успешной сборки проекта откройте http://localhost:3000 , и результат будет следующим.

Выход:

Ссылка: https://vuejs.org/guide/essentials/forms.html#number

JavaScript Picked

Модификатор номера привязки формы ввода Vue.js

App.vue

РЕКОМЕНДУЕМЫЕ СТАТЬИ