Tweerichtingsgegevensbinding aan inputs in Vue

Nu leren we hoe we met inputs moeten werken in het Vue-framework. Met hun hulp zullen we reactief gegevens aan de pagina toevoegen. Laten we beginnen. Stel dat we een input hebben:

<template>
	<input>
</template>

Stel dat we ook een eigenschap message hebben:

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

We kunnen deze eigenschap en de input op zo'n manier koppelen dat een verandering van een van beiden leidt tot een verandering van de andere. Dit wordt gedaan met behulp van de directive v-model, waarin de aan de input gekoppelde eigenschap wordt gespecificeerd.

Laten we onze input binden aan de eigenschap message:

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

Na het starten van de code staat in de input de tekst van de eigenschap message. En als je de gegevens in de input bewerkt - zal de eigenschap ook dienovereenkomstig veranderen. Om dit te zien, laten we de in de input ingevoerde inhoud ergens in een alinea weergeven:

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

Er is een input gegeven. Zorg ervoor dat de in de input ingevoerde tekst direct in de alinea eronder wordt weergegeven.

Wijzig de vorige taak zo, dat de tekst in hoofdletters wordt weergegeven.

Er is een input gegeven. Stel dat er een getal in wordt ingevoerd. Zorg ervoor dat in de alinea naarmate er wordt ingevoerd, het kwadraat van het ingevoerde getal wordt weergegeven.