Dubbelriktad databindning till inputfält i Vue

Nu ska vi lära oss att arbeta med inputfält i Vue-ramverket. Med deras hjälp kommer vi att lägga till data på sidan reaktivt. Låt oss komma igång. Låt oss säga att vi har ett inputfält:

<template>
	<input>
</template>

Låt oss också anta att vi har en egenskap message:

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

Vi kan koppla denna egenskap och inputfältet på ett sådant sätt att förändring i någon av dem leder till en förändring i den andra. Detta görs med hjälp av direktivet v-model, där egenskapen som är kopplad till inputfältet anges.

Låt oss koppla vår egenskap message till vårt inputfält:

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

Efter att koden har startats kommer texten från egenskapen message att finnas i inputfältet. Och om man redigerar data i inputfältet kommer egenskapen också att ändras i enlighet med detta. För att se detta, låt oss visa innehållet som skrivits in i inputfältet någonstans i ett stycke:

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

Ett inputfält är givet. Gör så att texten som skrivs in i inputfältet omedelbart visas i stycket under det.

Modifiera den föregående uppgiften så att texten visas med versaler.

Ett inputfält är givet. Låt ett nummer matas in i det. Gör så att kvadraten på det inmatade numret visas i stycket allteftersom användaren skriver.