# Получение данных формы по событию в 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` абзаца и кнопка. В инпут вводится ФИО пользователя через пробел. Сделайте так, чтобы по нажатию на кнопку в первом абзаце появилась фамилия пользователя, во втором - имя, а в третьем - отчество.

← →
↑