Vue e gli stili CSS

Una delle principali funzionalità di un framework di data binding web è quella di poter modificare lo stile dei nodi HTML in maniera reattiva, offrendo agli utenti un'interfaccia funzionale e di facile utilizzo.

Assegnazione di classi CSS

Vue.js permette di assegnare una o più classi ad un nodo HTML tramite diverse modalità, più o meno similari ma che possono risultare utili in diversi contesti.

Sintassi ad oggetti

La prima modalità proposta è quella basata su oggetti Javascript, composti da una chiave che corrisponde al nome della classe da aggiungere e da un valore che determina lo stato della classe, se presente o no. Guardiamo un esempio:

<div :class="{ 'my-class-name' : hasClass }"><div>

In questo caso verrà assegnata la classe my-class-name solamente se il valore della proprietà hasClass è positivo. Ovviamente, il comportamento della direttiva segue i canoni di Vue: se il valore della proprietà hasClass dovesse cambiare, anche la classe assegnata al nodo potrebbe cambiare.

Questa modalità accetta anche oggetti con diverse proprietà:

<div :class="{ 'my-class-name-1' : hasClass1, 'my-class-name-2' : hasClass2 }"><div>

Ma anche la possibilità di passare direttamente un oggetto come proprietà:

<div :class="myCustomClasses"><div>

data: {
  myCustomClasses: {
    'my-class-name: this.hasClass
  }
}

Sintassi ad array

La seconda modalità proposta è piu semplice e permette di passare una lista di classi da attivare ad un nodo HTML. Anche in questo caso è possibile passare un array inline con diverse proprietà o direttamente una proprietà di tipo array:

<div :class="['my-class-name']"><div>

oppure:

<div :class="myCustomClasses"><div>

data: {
  myCustomClasses: ['my-class-name-1', 'my-class-name-2']
}

Assegnazione di stili inline

Per quanto l'utilizzo di classi CSS è sempre raccomandato in ottica di separazione delle funzionalità tra i diversi layer di una applicazione, non sempre è possibile. Proviamo per esempio a pensare ad uno slider la cui dimensione dipende da un particolare intero o ad un elemento con un'immagine di sfondo dinamica. Vue offre anche una funzionalità di detect di eventuali vendor-prefix: nel caso fossero necessari, sarà il framework ad aggiungerli per noi.

Anche in questo caso Vue ci permette di assegnare stili tramite oggetti o tramite array.

Sintassi ad oggetti

Utilizzando un oggetto Javascript possiamo comunicare ad un particolare nodo gli stili da applicare utilizzando la chiave dell'oggetto come nome della property CSS e come valore appunto il valore da assegnare alla regola CSS (è possibile usare sia il camelCase che il kebab-case come chiave):

<div :style="myCustomStyles"><div>

data: {
  myCustomStyles: {
    color: 'red',
    height: '20px',
    fontSize: '12em'
  }
}

Sintassi ad array

Nel caso di differenti stili è possibile passare un array di oggetti alla direttiva style:

<div :style="[myCustomStyles, { width: '100px' }]"><div>