Vue.JS Change Style
Vue.JS viene utilizzato per creare interfacce utente (UI) e applicazioni a pagina singola (SPA). È facile imparare come usare Vue.JS e il quadro di libertà e comfort disponibili durante lo sviluppo di applicazioni in questo programma perché ha le caratteristiche più combinate di Angular e ReactJS. Ecco perché è noto per la sua codifica facile da usare e pulita.
Vue.JS fornisce una rilegatura di stile che è possibile utilizzare per cambiare lo stile dinamicamente. È possibile legare una variabile all'attributo di stile in qualsiasi tag HTML e modificare lo stile quando viene modificata la variabile legata. In questo articolo, daremo un'occhiata a come utilizzare l'associazione in stile e cambiare lo stile delle variabili usando Vue.js.
Binding in linea in linea
In vue.JS, possiamo legare le variabili agli attributi di stile usando le direttive a V-Bind.
Sintassi dell'oggetto
Proprio come con lo stile CSS in linea, possiamo anche fare uno stile in linea in Vue.JS usando la direttiva v-bind e la sintassi dell'oggetto Braces ricci. È possibile associare qualsiasi variabile all'attributo di stile usando il seguente script:
E, nel tag script e nei dati:
ata ()ritorno
Colorvar: 'Red',
Fontsize: 14
Possiamo anche abbattere l'oggetto ai dati e vincolare quell'oggetto con l'attributo di stile per rendere il nostro HTML più pulito come segue:
dati()ritorno
StyleObject:
Colorvar: 'Red',
Fontsize: 14
Ora legare la variabile "StyleObject" all'attributo di stile come segue:
Sintassi dell'array
Vue.JS offre anche l'opzione per legare più variabili nella sintassi dell'array al singolo tag HTML, come segue:
Valori multipli
Allo stesso modo, possiamo anche fornire più valori usando la sintassi dell'array a una proprietà CSS all'interno dell'associazione in linea, come segue:
Questi sono alcuni dei diversi modi in cui possiamo usare per le variabili di legame con l'attributo di stile per cambiare dinamicamente lo styling di una pagina web.
Riepilogo
Questo articolo ha riguardato la sintassi per lo stile in linea vincolante. Hai anche appreso la sintassi dell'oggetto e la sintassi dell'array utilizzati per legare i valori o le variabili agli attributi di stile in vue.js. Se questo articolo si è rivelato utile nel darti una migliore comprensione di Vue.JS, sentiti libero di continuare a leggere a Linuxhint.com per contenuti più utili.