Vinculação bidirecional de dados a inputs em Vue

Agora vamos aprender a trabalhar com inputs no framework Vue. Com eles, adicionaremos dados à página de forma reativa. Vamos começar. Suponha que temos um input:

<template>
	<input>
</template>

Suponha também que temos uma propriedade message:

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

Podemos vincular esta propriedade e o input de tal forma que a alteração de qualquer um deles leva à alteração do outro. Isso é feito usando a diretiva v-model, na qual a propriedade vinculada ao input é especificada.

Vamos vincular a propriedade message ao nosso input:

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

Após executar o código, o texto da propriedade message estará no input. E se editarmos os dados no input - a propriedade também mudará de acordo. Para ver isso, vamos exibir o conteúdo digitado no input em algum parágrafo:

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

Dado um input. Faça com que o texto digitado no input seja imediatamente exibido no parágrafo abaixo dele.

Modifique a tarefa anterior para que o texto seja exibido em letras maiúsculas.

Dado um input. Suponha que um número seja digitado nele. Faça com que, à medida que for digitado, o quadrado do número digitado seja exibido no parágrafo.