Two-way data binding to inputs in Vue

Now we will learn how to work with inputs in the Vue framework. With their help, we will add data to the page reactively. Let's get started. Let's say we have an input:

<template>
	<input>
</template>

Let us also have a property message:

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

We can link this property and the input so that changing either one will change the other. This is done using the v-model directive, which specifies the property that is bound to the input.

Let's bind the message property to our input:

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

After running the code, the input will contain the property text message. And if you edit the data in the input, the property will also change accordingly. To see this, let's output the content entered in the input somewhere in a paragraph:

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

Input is given. Make it so that the text entered into the input is immediately displayed in the paragraph below it.

Modify the previous task so that the text is displayed in uppercase.

Given an input. Let a number be entered into it. Make it so that the square of the entered number is displayed in the paragraph as you type.