Приемы работы с формами в фреймворке Vue

При наборе данных в инпуте мы можем не только просто выводить в какой-нибудь абзац, но и выполнять какую-либо операцию над этими данными в момент вывода на экран. Давайте рассмотрим такие приемы на примерах.

Пример №1

Пусть в инпут вводится число. Давайте сделаем так, чтобы в абзац рядом с нашим инпутом на лету (по мере набора) выводился квадрат этого числа.

Пусть инпут привязан к свойству num. В этом случае для решения задачи мы просто в фигурных скобках выполним нужную нам операцию, вот так: {{ num * num }} - и на экране увидим квадрат числа num, а не само число.

Убедитесь в этом сами, запустив следующий код и введя в инпут какое-либо число:

let app = new Vue({ el: '#app', data: { num: null, }, }); <div id="app"> <p>Результат: {{ num * num }}</p> <input v-model="num"> </div>

Пример №2

А теперь давайте сделаем так, чтобы при вводе какого-либо текста в инпут в абзаце он появлялся в верхнем регистре.

Пусть к инпуту привязано свойство str. Для решения задачи нужно вместо {{ str }} написать {{ str.toUpperCase() }}, применив к свойству обычный JavaScript метод toUpperCase - и текст автоматически будет преобразован в верхний регистр:

let app = new Vue({ el: '#app', data: { str: '', }, }); <div id="app"> <p>Результат: {{ str.toUpperCase() }}</p> <input v-model="str"> </div>

Пример №3

Давайте сделаем так, чтобы при вводе какого-либо текста в инпут в абзаце он появлялся в перевернутом виде.

Для этого реализуем метод reverseStr, который параметром будет принимать строку и возвращать ее в перевернутом виде:

methods: { reverseStr: function(str) { return str.split('').reverse().join(''); } }

Этим методом мы воспользуемся в фигурных скобках, передав ему параметром свойство str, к которому привязан наш инпут:

<p>Результат: {{ reverseStr(str) }}</p>

Получится, что при выводе данных из str к ним сначала будет применяться метод reverseStr.

Давайте запустим и убедимся в этом:

let app = new Vue({ el: '#app', data: { str: '', }, methods: { reverseStr: function(str) { return str.split('').reverse().join(''); } } }); <div id="app"> <p>Результат: {{ reverseStr(str) }}</p> <input v-model="str"> </div>

Итоги

Итак, подытожим: при выводе данных вы можете выполнять с этими данными любые разрешенные операции - они будут мгновенно применяться по мере ввода данных в инпут.

Не стоит злоупотреблять такими приемами, зачастую лучше сделать кнопку, по нажатию на которую будет производится некоторое действие.

Почему так может быть лучше: если над над данными при выводе выполняется какая-либо тяжелая операция, то обновляя страницу по мере вывода мы будем создавать лишнюю нагрузку на наш сайт, что не очень хорошо.

Кроме того, может быть и такая ситуация: для решения какой-то задачи нам нужны данные из нескольких инпутов, поэтому мы должны дождаться заполнения всех инпутов и только тогда начинать действовать.

Задачи

Дан инпут. Сделайте так, чтобы вводимый в инпут текст сразу выводился в абзаце под ним.

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

Дан инпут и абзац. В инпут вводится возраст пользователя. Сделайте так, чтобы при наборе текста в абзаце автоматически появлялся год рождения пользователя.

Дан инпут. Сделайте так, чтобы вводимый в инпут текст сразу выводился в абзаце под ним в перевернутом виде.

Даны два инпута. Сделайте так, чтобы при вводе текста в первый инпут он появлялся во втором и наоборот.