Получение данных формы по событию в Vue
Пусть у нас есть кнопка и инпут, в который вводится число. Давайте по нажатию на кнопку выведем квадрат введенного в инпут числа. Приступим к реализации.
Для решения задачи нам понадобится
два свойства. Свойство num
будет изменяться по мере ввода
данных в инпут, а в свойство
res мы будем записывать
результат возведения в квадрат:
data() {
return {
num: 0,
res: 0
}
}
Давайте теперь сделаем инпут, привяжем
к нему свойство num, сделаем кнопку,
по клику на которую будет выполнятся метод
calc, и сделаем также абзац, в который
будет выводится результат:
<template>
<p>{{ res }}</p>
<input v-model="num">
<button v-on:click="calc">work</button>
</template>
Давайте напишем реализацию метода calc:
methods: {
calc: function() {
this.res = this.num ** 2;
}
}
Получится, что как только будет вызван метод
calc (а это случится по нажатию на
кнопку), в свойство res запишется
результат и при этом одновременно выведется
в нашем абзаце.
Дан инпут. Дана кнопка. Дан абзац. В инпут вводится число. Сделайте так, чтобы по нажатию на кнопку абзаце появился квадратный корень этого числа.
Даны два инпута. Дана кнопка. Дан абзац. В каждый инпут вводятся числа. Сделайте так, чтобы по нажатию на кнопку в абзаце появилась сумма этих чисел.
Даны два инпута. Дана кнопка. В каждый инпут вводится какой-то текст. Сделайте так, чтобы по нажатию на кнопку текст первого инпута стал во втором и наоборот.
Дан инпут, 3 абзаца и кнопка. В инпут
вводится ФИО пользователя через пробел. Сделайте
так, чтобы по нажатию на кнопку в первом
абзаце появилась фамилия пользователя, во
втором - имя, а в третьем - отчество.