Formulardaten per Event in Vue abrufen

Angenommen, wir haben einen Button und ein Input-Feld, in das eine Zahl eingegeben wird. Lassen Sie uns beim Drücken des Buttons das Quadrat der in das Input-Feld eingegebenen Zahl ausgeben. Beginnen wir mit der Implementierung.

Um die Aufgabe zu lösen, benötigen wir zwei Eigenschaften. Die Eigenschaft num wird sich bei der Eingabe von Daten in das Input-Feld ändern, und in die Eigenschaft res werden wir das Ergebnis der Quadrierung schreiben:

data() {
	return {
		num: 0,
		res: 0
	}
}

Lassen Sie uns nun ein Input-Feld erstellen, es an die Eigenschaft num binden, einen Button erstellen, bei einem Klick auf den die Methode calc ausgeführt wird, und auch einen Absatz hinzufügen, in den das Ergebnis ausgegeben wird:

<template>
	<p>{{ res }}</p>
	<input v-model="num">
	<button v-on:click="calc">work</button>
</template>

Lassen Sie uns die Implementierung der Methode calc schreiben:

methods: {
	calc: function() {
		this.res = this.num ** 2;
	}
}

Das Ergebnis ist, dass sobald die Methode calc aufgerufen wird (was durch Drücken des Buttons geschieht), in die Eigenschaft res das Ergebnis geschrieben wird und gleichzeitig in unserem Absatz ausgegeben wird.

Gegeben ist ein Input-Feld. Gegeben ist ein Button. Gegeben ist ein Absatz. In das Input-Feld wird eine Zahl eingegeben. Sorgen Sie dafür, dass beim Drücken des Buttons im Absatz die Quadratwurzel dieser Zahl erscheint.

Gegeben sind zwei Input-Felder. Gegeben ist ein Button. Gegeben ist ein Absatz. In jedes Input-Feld werden Zahlen eingegeben. Sorgen Sie dafür, dass beim Drücken des Buttons im Absatz die Summe dieser Zahlen erscheint.

Gegeben sind zwei Input-Felder. Gegeben ist ein Button. In jedes Input-Feld wird ein Text eingegeben. Sorgen Sie dafür, dass beim Drücken des Buttons der Text des ersten Input-Felds im zweiten erscheint und umgekehrt.

Gegeben ist ein Input-Feld, 3 Absätze und ein Button. In das Input-Feld wird der Vor- und Nachname des Benutzers durch Leerzeichen getrennt eingegeben. Sorgen Sie dafür, dass beim Drücken des Buttons im ersten Absatz der Nachname des Benutzers erscheint, im zweiten - der Vorname und im dritten - der Vatersname.