Αμφίδρομη σύνδεση δεδομένων σε inputs στο Vue

Τώρα θα μάθουμε πώς να δουλεύουμε με inputs στο πλαίσιο Vue. Με τη βοήθειά τους θα προσθέτουμε δεδομένα στη σελίδα με αντιδραστικό τρόπο. Ας αρχίσουμε. Ας υποθέσουμε ότι έχουμε ένα input:

<template>
	<input>
</template>

Ας υποθέσουμε επίσης ότι έχουμε μια ιδιότητα message:

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

Μπορούμε να συνδέσουμε αυτήν την ιδιότητα και το input με τέτοιο τρόπο, ώστε η αλλαγή οποιουδήποτε από αυτά να οδηγεί σε αλλαγή του άλλου. Αυτό γίνεται με τη χρήση της directive v-model, στην οποία καθορίζεται η ιδιότητα που συνδέεται με το input.

Ας συνδέσουμε στο input μας την ιδιότητα message:

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

Μετά την εκτέλεση του κώδικα, στο input θα υπάρχει το κείμενο της ιδιότητας message. Και αν επεξεργαστούμε τα δεδομένα στο input - η ιδιότητα θα αλλάξει αντίστοιχα. Για να το δούμε αυτό, ας εμφανίσουμε τα δεδομένα που εισάγονται στο input κάπου σε μια παράγραφο:

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

Δίνεται ένα input. Κάντε το έτσι ώστε το κείμενο που εισάγεται στο input να εμφανίζεται αμέσως στην παράγραφο κάτω από αυτό.

Τροποποιήστε το προηγούμενο πρόβλημα έτσι, ώστε το κείμενο να εμφανίζεται σε κεφαλαία γράμματα.

Δίνεται ένα input. Ας εισάγεται σε αυτό ένας αριθμός. Κάντε το έτσι ώστε στην παράγραφο καθώς εισάγεται να εμφανίζεται το τετράγωνο του αριθμού που εισάγεται.