Binding bidirezionale dei dati agli input in Vue
Ora impareremo a lavorare con gli input nel framework Vue. Con il loro aiuto aggiungeremo dati alla pagina in modo reattivo. Iniziamo. Supponiamo di avere un input:
<template>
<input>
</template>
Supponiamo anche di avere
una proprietà message:
data() {
return {
message: 'hello',
}
}
Possiamo collegare questa proprietà e l'input in modo
che la modifica di uno di essi
porti alla modifica dell'altro.
Questo viene fatto usando la direttiva v-model,
in cui viene specificata la proprietà collegata
all'input.
Colleghiamo la nostra proprietà
message al nostro input:
<template>
<input v-model="message">
</template>
Dopo l'avvio del codice, nell'input ci sarà il testo
della proprietà message. E se si modificano
i dati nell'input - la proprietà cambierà
di conseguenza. Per vederlo,
visualizziamo il contenuto inserito nell'input
da qualche parte in un paragrafo:
<template>
<input v-model="message">
<p>{{ message }}</p>
</template>
È dato un input. Fate in modo che il testo inserito nell'input venga immediatamente visualizzato nel paragrafo sottostante.
Modificate il problema precedente in modo che il testo venga visualizzato in maiuscolo.
È dato un input. Supponiamo che venga inserito un numero. Fate in modo che nel paragrafo, man mano che viene inserito, venga visualizzato il quadrato del numero inserito.
