Obtención de datos de formulario por evento en Vue

Supongamos que tenemos un botón y un campo de entrada donde se introduce un número. Al presionar el botón mostremos el cuadrado del número introducido en el campo. Comencemos con la implementación.

Para resolver la tarea necesitaremos dos propiedades. La propiedad num cambiará a medida que se ingresen datos en el campo, y en la propiedad res escribiremos el resultado de elevar al cuadrado:

data() {
	return {
		num: 0,
		res: 0
	}
}

Ahora creemos un campo de entrada, enlacémoslo a la propiedad num, creemos un botón que al hacer clic ejecutará el método calc, y también creemos un párrafo donde se mostrará el resultado:

<template>
	<p>{{ res }}</p>
	<input v-model="num">
	<button v-on:click="calc">work</button>
</template>

Escribamos la implementación del método calc:

methods: {
	calc: function() {
		this.res = this.num ** 2;
	}
}

El resultado será que tan pronto como se llame al método calc (lo cual ocurrirá al presionar el botón), en la propiedad res se escribirá el resultado y simultáneamente se mostrará en nuestro párrafo.

Se da un campo de entrada. Se da un botón. Se da un párrafo. En el campo se introduce un número. Haga que al presionar el botón en el párrafo aparezca la raíz cuadrada de ese número.

Se dan dos campos de entrada. Se da un botón. Se da un párrafo. En cada campo se introducen números. Haga que al presionar el botón en el párrafo aparezca la suma de estos números.

Se dan dos campos de entrada. Se da un botón. En cada campo se introduce algún texto. Haga que al presionar el botón el texto del primer campo quede en el segundo y viceversa.

Se da un campo de entrada, 3 párrafos y un botón. En el campo se introduce el nombre completo del usuario separado por espacios. Haga que al presionar el botón en el primer párrafo aparezca el apellido del usuario, en el segundo - el nombre, y en el tercero - el patronímico.