Zweidirektionale Datenbindung an Inputs in Vue

Jetzt lernen wir, wie man mit Inputs im Vue-Framework arbeitet. Mit ihrer Hilfe werden wir reaktiv Daten zur Seite hinzufügen. Lassen Sie uns beginnen. Nehmen wir an, wir haben einen Input:

<template>
	<input>
</template>

Nehmen wir außerdem an, wir haben eine Eigenschaft message:

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

Wir können diese Eigenschaft und den Input so verknüpfen, dass die Änderung eines von beiden zu einer Änderung des anderen führt. Dies geschieht mit der Direktive v-model, in der die an den Input gebundene Eigenschaft angegeben wird.

Binden wir unsere Eigenschaft message an unseren Input:

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

Nach dem Start des Codes steht im Input der Text der Eigenschaft message. Und wenn die Daten im Input bearbeitet werden, ändert sich die Eigenschaft entsprechend. Um dies zu sehen, lassen Sie uns den in den Input eingegebenen Inhalt irgendwo in einem Absatz ausgeben:

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

Gegeben ist ein Input. Sorgen Sie dafür, dass der in den Input eingegebene Text sofort im Absatz darunter ausgegeben wird.

Modifizieren Sie die vorherige Aufgabe so, dass der Text in Großbuchstaben ausgegeben wird.

Gegeben ist ein Input. Es soll eine Zahl eingegeben werden. Sorgen Sie dafür, dass im Absatz während der Eingabe das Quadrat der eingegebenen Zahl ausgegeben wird.