Vue Academy · Lezione

v-model su tutti gli elementi dei form

Input, textarea, select, checkbox, radio — come v-model si adatta a ogni tipo di elemento

v-model su tutti gli elementi dei form è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Associare gli input dei moduli

v-model crea un'associazione bidirezionale tra i controlli del modulo e lo stato reattivo. Ogni tipo di controllo — testo, casella di controllo, pulsante di opzione, select, textarea — utilizza v-model in modo leggermente diverso. Questa lezione li tratta tutti.

Input di testo

In un input di testo, v-model associa il valore e lo aggiorna durante l'input. Digiti nella casella e il ref si aggiorna in tempo reale.

<script setup>
import { ref } from 'vue'
const name = ref('')
</script>

<template>
  <input v-model="name" />
  <p>Hello, {{ name }}</p>
</template>

Textarea

Una textarea funziona proprio come un input di testo. Utilizzi v-model direttamente sull'elemento: non inserisca testo tra i tag.

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

Casella di controllo: valore booleano

Una singola casella di controllo associata a un ref booleano alterna i valori true e false.

<script setup>
import { ref } from 'vue'
const agreed = ref(false)
</script>

<template>
  <input type="checkbox" v-model="agreed" />
  <p>Agreed: {{ agreed }}</p>
</template>

Caselle di controllo multiple in un array

Associ più caselle di controllo allo stesso ref di tipo array. Ogni casella selezionata aggiunge il proprio value all'array.

<script setup>
import { ref } from 'vue'
const hobbies = ref([])
</script>

<template>
  <input type="checkbox" value="reading" v-model="hobbies" />
  <input type="checkbox" value="coding" v-model="hobbies" />
  <p>{{ hobbies }}</p>
</template>

Pulsanti di opzione

I pulsanti di opzione di un gruppo condividono un unico ref. Il ref contiene il value dell'opzione selezionata.

<script setup>
import { ref } from 'vue'
const picked = ref('')
</script>

<template>
  <input type="radio" value="small" v-model="picked" />
  <input type="radio" value="large" v-model="picked" />
  <p>Picked: {{ picked }}</p>
</template>

Select: singola

Una select singola viene associata a un valore che corrisponde all'opzione scelta. Se desidera, fornisca un'opzione segnaposto con un valore vuoto.

<script setup>
import { ref } from 'vue'
const city = ref('')
</script>

<template>
  <select v-model="city">
    <option value="">Choose</option>
    <option value="paris">Paris</option>
    <option value="tokyo">Tokyo</option>
  </select>
</template>

Select: multipla

Aggiunga l'attributo multiple e associ la select a un array. Le opzioni selezionate vengono raccolte nell'array.

<script setup>
import { ref } from 'vue'
const cities = ref([])
</script>

<template>
  <select v-model="cities" multiple>
    <option value="paris">Paris</option>
    <option value="tokyo">Tokyo</option>
  </select>
</template>

Modificatori del valore

I modificatori perfezionano v-model: .trim rimuove gli spazi bianchi, .number converte il valore in un numero e .lazy sincronizza al cambiamento invece che a ogni pressione di un tasto.

<input v-model.number="age" />
<input v-model.trim="username" />
<input v-model.lazy="note" />

Un unico modello mentale

Indipendentemente dal controllo, v-model riceve un valore e lo restituisce quando cambia. Il tipo di controllo determina solo la forma del valore: un booleano, una stringa o un array.

Componenti di input personalizzati

v-model funziona anche sui componenti creati da Lei. Un input personalizzato dichiara una prop modelValue ed emette update:modelValue, comportandosi così come un controllo nativo per il componente padre.

<!-- parent -->
<MyTextInput v-model="name" />

<!-- child declares modelValue + emits update:modelValue -->

Verifica rapida

Metta alla prova le Sue conoscenze sull'associazione dei moduli.

Riepilogo

v-model nei controlli dei moduli:

Gli input di testo e le textarea associano una stringa.
Una singola casella di controllo associa un booleano; più caselle di controllo associano un array.
I pulsanti di opzione condividono un ref che contiene il valore selezionato.
La select associa un valore; con multiple associa un array.
Modificatori: .trim, .number, .lazy.

Domande Frequenti

La lezione «v-model su tutti gli elementi dei form» è gratuita?

Sì — il testo completo di «v-model su tutti gli elementi dei form» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «v-model su tutti gli elementi dei form»?

Input, textarea, select, checkbox, radio — come v-model si adatta a ogni tipo di elemento Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «v-model su tutti gli elementi dei form»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

v-model su tutti gli elementi dei form
Invio e reset dei form
Pattern di validazione manuale
VeeValidate per la validazione basata su schema

← Torna a Vue Academy