Legarea bidirecțională a datelor la input-uri în Vue

Acum vom învăța să lucrăm cu input-uri în framework-ul Vue. Cu ajutorul lor vom adăuga date în pagină în mod reactiv. Să începem. Să presupunem că avem un input:

<template>
	<input>
</template>

Să presupunem că avem și o proprietate message:

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

Putem lega această proprietate și input-ul în așa fel, încât modificarea oricăruia dintre ele să ducă la modificarea celuilalt. Acest lucru se face cu ajutorul directivei v-model, în care se specifică proprietatea legată de input.

Să legăm de input-ul nostru proprietatea message:

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

După pornirea codului în input va fi textul proprietății message. Iar dacă edităm datele în input - proprietatea se va schimba în mod corespunzător. Pentru a vedea acest lucru, să afișăm conținutul introdus în input undeva într-un paragraf:

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

Este dat un input. Faceți în așa fel, încât textul introdus în input să fie imediat afișat în paragraful de sub el.

Modificați problema anterioară astfel, încât textul să fie afișat în registru superior.

Este dat un input. Să presupunem că în el se introduce un număr. Faceți în așa fel, încât în paragraf pe măsură ce introduceți să fie afișat pătratul numărului introdus.