Binding di attributi e classi
Esegua il binding dinamico di attributi, classi e stili.
Binding di attributi e classi è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. 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 3 lezioni in totale.
Binding di classi e stili
Un'esigenza comune consiste nel modificare la classe o lo stile di un elemento in base allo stato.
Vue tratta :class e :style in modo speciale, consentendo di passare oggetti e array, non solo stringhe.
Sintassi a oggetto di :class
Passi un oggetto a :class. Le chiavi sono nomi di classi; i valori truthy le includono.
<div :class="{ active: isActive, disabled: isDisabled }">
Status box
</div>
<!-- if isActive is true, the "active"
class is applied -->Combinazione di classi statiche e dinamiche
Un attributo class statico e un :class dinamico vengono combinati.
<div class="card" :class="{ highlighted: isSelected }">
Always has "card";
adds "highlighted" when selected.
</div>Sintassi ad array di :class
Passi un array per applicare un elenco di classi.
<div :class="[baseClass, themeClass]">Box</div>
<!-- data:
baseClass = "panel"
themeClass = "dark" -->Condizionali nell'array
È possibile combinare espressioni condizionali all'interno dell'array.
<div :class="[isActive ? 'active' : '', errorClass]">
...
</div>
<!-- or nest an object inside the array -->
<div :class="[baseClass, { active: isActive }]">
...
</div>Associazione degli stili inline
La direttiva :style associa gli stili inline utilizzando un oggetto.
Utilizzi nomi di proprietà in camelCase, come fontSize.
<p :style="{ color: textColor, fontSize: size + 'px' }">
Styled text
</p>
<!-- data: textColor = "red", size = 18 -->:style con un array
È possibile passare un array di oggetti di stile; Vue li unisce.
<div :style="[baseStyles, overrideStyles]">
Merged styles
</div>Aggiunta automatica dei prefissi
Quando una proprietà CSS richiede prefissi specifici del browser, Vue può aggiungerli automaticamente nei browser che li supportano.
- Si scrive la proprietà standard
- Vue applica il prefisso corretto, se necessario
In questo modo le associazioni degli stili restano ordinate.
Associazione dinamica degli attributi
Qualsiasi attributo può essere associato dinamicamente con :attr.
<img :src="photoUrl" :alt="photoCaption" />
<input :placeholder="hintText" :maxlength="limit" />
<a :href="link" :target="openInNewTab ? '_blank' : '_self'">Go</a>Attributi booleani
Per gli attributi booleani come disabled, Vue include l'attributo solo quando il valore è truthy.
<button :disabled="isSubmitting">Submit</button>
<!-- if isSubmitting is false,
the disabled attribute is removed -->Associazione condizionale di più classi
Un esempio pratico che attiva o disattiva più classi contemporaneamente.
<li
class="todo"
:class="{
done: task.completed,
overdue: task.isLate,
priority: task.urgent
}"
>
{{ task.title }}
</li>Verifica rapida
Verifichi la propria comprensione delle associazioni di classi e stili.
Riepilogo: associazioni di attributi e classi
Ha imparato a utilizzare le associazioni dinamiche:
- La sintassi a oggetto di :class attiva o disattiva le classi in base al valore truthy
- La sintassi ad array di :class applica un elenco
- :style associa stili inline con chiavi in camelCase
- Qualsiasi attributo può essere associato con :attr
- Gli attributi booleani vengono visualizzati solo quando il valore è truthy
Prossimo argomento: basi dei componenti e comunicazione.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 42
- Lezioni
- 156
Domande Frequenti
La lezione «Binding di attributi e classi» è gratuita?
Sì — il testo completo di «Binding di attributi e classi» è 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 3 lezioni in totale.
Cosa imparerò in «Binding di attributi e classi»?
Esegua il binding dinamico di attributi, classi e stili. 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 3.
Quanto tempo richiede la lezione «Binding di attributi e classi»?
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
- Interpolazione e direttive
- Condizionali e cicli
- Binding di attributi e classi