Vue.js
Associazione dati

Testo

La forma più semplice di associazione dei dati è l'interpolazione del testo usando la sintassi "Moustache" (doppie parentesi graffe):

<span>Message: {{ msg }}</span>

Il tag dei baffi verrà sostituito con il valore della proprietà msg sull'oggetto dati corrispondente. Verrà inoltre aggiornato ogni volta che la proprietà msg dell'oggetto dati cambia.

È inoltre possibile eseguire interpolazioni una tantum che non si aggiornano sulla modifica dei dati:

<span>This will never change: {{* msg }}</span>

HTML grezzo

I baffi doppi interpretano i dati come testo semplice, non HTML. Per generare un vero codice HTML, dovrai utilizzare i baffi tripli:

<div>{{{ raw_html }}}</div>

I contenuti sono inseriti come semplici HTML - i collegamenti dei dati vengono ignorati. Se hai bisogno di riutilizzare i pezzi del modello, dovresti usare partial.

attributi

I baffi possono essere utilizzati anche all'interno degli attributi HTML:

<div id="item-{{ id }}"></div>

Tieni presente che le interpolazioni degli attributi non sono consentite nelle direttive Vue.js e negli attributi speciali. Non preoccuparti, Vue.js solleva avvisi per te quando i baffi vengono utilizzati in posti sbagliati.

filtri

Vue.js ti consente di aggiungere "filtri" opzionali alla fine di un'espressione, indicati dal simbolo "pipe":

{{ message | capitalize }}

Qui stiamo "convogliando" il valore dell'espressione del message attraverso il filtro in capitalize incorporato, che in realtà è solo una funzione JavaScript che restituisce il valore in maiuscolo. Vue.js fornisce una serie di filtri integrati e parleremo di come scrivere i tuoi filtri in un secondo momento.

Nota che la sintassi della pipe non fa parte della sintassi JavaScript, quindi non puoi mischiare i filtri all'interno delle espressioni; puoi solo aggiungerli alla fine di un'espressione.

I filtri possono essere concatenati:

{{ message | filterA | filterB }}

I filtri possono anche prendere argomenti:

{{ message | filterA 'arg1' arg2 }}

La funzione filtro riceve sempre il valore dell'espressione come primo argomento. Gli argomenti citati sono interpretati come una stringa semplice, mentre quelli non quotati saranno valutati come espressioni. Qui, la stringa semplice 'arg1' verrà passata nel filtro come secondo argomento, e il valore dell'espressione arg2 verrà valutato e passato come terzo argomento.