Vue Academy · Lezione

Binding dinamici e multipli con v-bind

Nomi dinamici degli attributi :[dynamicAttr], sintassi a oggetto di v-bind, binding di più attributi contemporaneamente

Binding dinamici e multipli con v-bind è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Binding dinamico degli attributi

La direttiva v-bind (abbreviazione :) collega un attributo HTML a un valore reattivo. Permette di gestire classi, stili e persino attributi con nome dinamico.

v-bind di base

È possibile associare qualsiasi attributo a un'espressione. Quando il valore cambia, Vue aggiorna l'attributo.

<img :src="imageUrl" :alt="description" />

Binding delle classi: sintassi a oggetto

Per le classi, la sintassi a oggetto attiva o disattiva una classe in base a un valore truthy. La chiave è il nome della classe; il valore determina se applicarla.

<div :class="{ active: isActive, disabled: isDisabled }"></div>

Binding delle classi: sintassi ad array

La sintassi ad array applica un elenco di classi. Può combinare stringhe statiche e variabili reattive oppure annidare un oggetto per le voci condizionali.

<div :class="[baseClass, isActive ? activeClass : '']"></div>

Combinare array e oggetti

È possibile annidare la forma a oggetto nell'array per ottenere il meglio di entrambi: classi sempre attive insieme a classi condizionali.

<div :class="[baseClass, { active: isActive }]"></div>

Binding degli stili: sintassi a oggetto

Associ gli stili inline con un oggetto. Usi nomi di proprietà in camelCase (o kebab-case tra virgolette). I valori possono essere reattivi.

<div :style="{ color: textColor, fontSize: size + 'px' }"></div>

Binding degli stili: array di oggetti

Passi un array di oggetti di stile per unire più sorgenti di stili, come uno stile di base e una sovrascrittura del tema.

<div :style="[baseStyles, overrideStyles]"></div>

Associare molti attributi in una volta

v-bind senza argomento distribuisce sull'elemento un intero oggetto di attributi. Ogni chiave diventa un attributo.

<script setup>
const attrs = { id: 'main', class: 'box', 'data-role': 'panel' }
</script>

<template>
  <div v-bind="attrs"></div>
</template>

Nomi dinamici degli attributi

Usi le parentesi quadre per calcolare il nome dell'attributo stesso durante l'esecuzione. L'espressione tra parentesi viene valutata e usata come chiave dell'attributo.

<script setup>
const attrName = 'title'
const attrValue = 'Hello'
</script>

<template>
  <div :[attrName]="attrValue"></div>
</template>

Quando usare ciascuna modalità

Sintassi a oggetto per le classi — per attivare o disattivare più classi in base a una condizione.
Sintassi ad array per le classi — per combinare una classe di base con condizioni.
v-bind="obj" — per inoltrare un intero insieme di attributi.
Nome dinamico :[name] — quando la chiave dell'attributo viene determinata durante l'esecuzione.

Un esempio combinato

Questo elemento usa insieme una classe dinamica, uno stile dinamico e attributi distribuiti: tutto è reattivo.

<div
  :class="[base, { active: isActive }]"
  :style="{ color: textColor }"
  v-bind="extraAttrs"
></div>

Verifica rapida

Metta alla prova le Sue conoscenze su v-bind.

Riepilogo

Ha appreso l'ampia portata di v-bind:

La sintassi a oggetto per le classi attiva o disattiva le classi in base a una condizione; la sintassi ad array le combina.
Il binding degli stili usa oggetti (in camelCase) o array di oggetti.
v-bind="obj" distribuisce tutti gli attributi di un oggetto.
:[name]="val" associa un attributo con nome dinamico.

Domande Frequenti

La lezione «Binding dinamici e multipli con v-bind» è gratuita?

Sì — il testo completo di «Binding dinamici e multipli con v-bind» è 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 «Binding dinamici e multipli con v-bind»?

Nomi dinamici degli attributi :[dynamicAttr], sintassi a oggetto di v-bind, binding di più attributi contemporaneamente 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 3 di 4.

Quanto tempo richiede la lezione «Binding dinamici e multipli con v-bind»?

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

← Torna a Vue Academy