Модификатор обрезки привязки ввода формы Vue.js
Vue.js — это прогрессивная среда JavaScript для разработки пользовательских веб-интерфейсов. Это универсальный фреймворк, обеспечивающий высокую скорость и производительность. Мы можем создавать одностраничные приложения, а также приложения полного стека.
Привязка ввода используется для синхронизации и поддержания состояния элементов ввода формы с соответствующим состоянием в javascript. Таким образом, Vue.js предоставляет директиву v-model, которая упрощает задачу поддержания состояния форм за счет простой реализации.
Модификатор Input Binding trim автоматически удаляет пробелы из пользовательского ввода. Он обрезает текстовое содержимое, удаляя пробелы перед текстом и после конца текста. Он работает с любым элементом ввода.
Синтаксис : добавьте модификатор .trim в конце v-модели к элементу по вашему выбору следующим образом:
<input type="text" placeholder="Write here!" v-model.trim="message" />
Пример . В следующем примере у нас есть элемент ввода с модификатором trim.
Шаг 1. Создайте новый проект Vue.js с помощью диспетчера пакетов npm node.js.
npm init vue@latest
Введите имя проекта и предустановите проект следующим образом:
Структура проекта: После успешной установки будет сформирована следующая структура проекта.
Шаг 2: Внутри файла App.vue добавьте сообщение -член данных, которое будет использоваться для v-модели, в разделе данных файла сценария. v-модель использует элемент данных для привязки данных, и ее очень просто реализовать.
вид приложения:
Javascript
<script>export default { data() { return { message: "", } },}</script> |
Шаг 3: Теперь в разделе шаблона добавьте элемент ввода с элементом абзаца , чтобы отобразить записываемое сообщение. Внутри элемента ввода упомяните v-модель, где мы укажем член данных, который мы определили ранее.
вид приложения:
Javascript
<template> <center> <h1 style="text-align: center; color: green"> GeeksforGeeks </h1> <strong> Vue.js Form Input Value Binding trim modifier </strong> <br /> </center> <center> <p>Content with trim modifier</p> {{ message }} <br /> <input type="text" placeholder="Write here!" v-model.trim="message" /> </center></template> |
Шаг 4: Запустите проект с помощью следующей команды и посмотрите результат.
npm run dev
Вывод: проект запустится на http://localhost:3000/ и результат будет следующим:
Ссылка: https://vuejs.org/guide/essentials/forms.html#trim