Phenquestions
Vue.js viene utilizzato per creare interfacce utente (UI) e applicazioni a pagina singola (SPA). È facile imparare a usare Vue.js e il quadro di libertà e comfort disponibile durante lo sviluppo di applicazioni in questo programma perché ha le migliori funzionalità combinate di Angular e ReactJS. Ecco perché è noto per la sua codifica facile da usare e pulita.
Vue.js fornisce l'associazione di stile che puoi utilizzare per modificare lo stile in modo dinamico. Puoi associare una variabile all'attributo style in qualsiasi tag HTML e cambiare lo stile quando viene modificata la variabile associata. In questo articolo, daremo un'occhiata a come utilizzare l'associazione di stile e modificare lo stile delle variabili utilizzando vue.js.
Rilegatura stile in linea
in vista.js, possiamo associare le variabili agli attributi di stile usando le direttive v-bind.
Sintassi dell'oggetto
Proprio come con lo stile CSS in linea, possiamo anche fare lo stile in linea in Vue.js utilizzando la direttiva v-bind e la sintassi dell'oggetto parentesi graffe. Puoi associare qualsiasi variabile all'attributo style utilizzando il seguente script:
E, nel tag e nei dati dello script:
ata()ritorno
colorVar: 'rosso',
dimensione del carattere: 14
Possiamo anche portare l'oggetto fino ai dati e associare quell'oggetto con l'attributo style per rendere il nostro HTML più pulito come segue:
dati()ritorno
styleObject:
colorVar: 'rosso',
dimensione del carattere: 14
Ora legheremo la variabile "styleObject" all'attributo style come segue:
Sintassi dell'array
Vue.js fornisce anche la possibilità di associare più variabili nella sintassi dell'array al singolo tag HTML, come segue:
Valori multipli
Allo stesso modo, possiamo anche dare 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 che possiamo usare per associare le variabili con l'attributo style per cambiare dinamicamente lo stile di una pagina web.
Sommario
Questo articolo ha trattato la sintassi per l'associazione dello stile in linea. Hai anche appreso della sintassi dell'oggetto e della sintassi dell'array utilizzata per associare i valori o le variabili agli attributi di stile in vue.js. Se questo articolo si è rivelato utile per darti una migliore comprensione di vue.js, sentiti libero di continuare a leggere su linuxhint.com per contenuti più utili.
