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:

App.vue<template>
  <input>
</template>

Supponiamo anche di avere una proprietà message:

javascriptdata() {
  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:

App.vue<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:

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