Enlace de datos bidireccional a inputs en Vue

Ahora aprenderemos a trabajar con inputs en el framework Vue. Con su ayuda agregaremos datos reactivamente en la página. Empecemos. Supongamos que tenemos un input:

<template>
	<input>
</template>

Supongamos también que tenemos una propiedad message:

data() {
	return {
		message: 'hello',
	}
}

Podemos vincular esta propiedad y el input de tal manera que el cambio en cualquiera de ellos conduzca al cambio en el otro. Esto se hace mediante la directiva v-model, en la que se especifica la propiedad vinculada al input.

Vinculemos a nuestro input la propiedad message:

<template>
	<input v-model="message">
</template>

Después de ejecutar el código, en el input estará el texto de la propiedad message. Y si editamos los datos en el input - la propiedad también cambiará correspondientemente. Para ver esto, mostremos el contenido ingresado en el input en algún lugar de un párrafo:

<template>
	<input v-model="message">
	<p>{{ message }}</p>
</template>

Se da un input. Haz que el texto ingresado en el input se muestre inmediatamente en el párrafo debajo de él.

Modifica la tarea anterior para que el texto se muestre en mayúsculas.

Se da un input. Supongamos que en él se ingresa un número. Haz que en el párrafo, a medida que se ingresa, se muestre el cuadrado del número ingresado.