Приемы работы с формами в фреймворке 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>
Итоги
Итак, подытожим: при выводе данных вы можете выполнять с этими данными любые разрешенные операции - они будут мгновенно применяться по мере ввода данных в инпут.

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

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

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