Phenquestions
Vue.js koristi se za izgradnju korisničkog sučelja (UI) i aplikacija s jednom stranicom (SPA-a). Lako je naučiti kako koristiti Vue.js i okvir slobode i udobnosti koji je dostupan tijekom razvijanja aplikacija u ovom programu jer ima najbolje kombinirane značajke Angular i ReactJS. Zbog toga je poznat po jednostavnom i čistom kodiranju.
Vue.js nudi povezivanje stila koje možete koristiti za dinamičku promjenu stila. Možete povezati varijablu s atributom style u bilo kojoj HTML oznaci i promijeniti stil kada se promijeni vezana varijabla. U ovom ćemo članku pogledati kako se koristi vezivanje stilova i promjena stila varijabli pomoću vue.js.
Povezivanje stila u obliku
U vue.js, možemo povezati varijable s atributima stila pomoću v-bind direktiva.
Sintaksa objekta
Baš kao i kod umetnutog CSS stylinga, i u Vueu možemo raditi inline styling.js koristeći v-bind direktivu i sintaksu objekta kovrčavih zagrada. Bilo koju varijablu možete povezati s atributom style pomoću sljedeće skripte:
I, u oznaci skripte i podacima:
ata ()povratak
colorVar: 'crvena',
fontSize: 14
Objekt također možemo odvesti do podataka i povezati ga s atributom style kako bi naš HTML izgledao čišći na sljedeći način:
podaci ()povratak
styleObject:
colorVar: 'crvena',
fontSize: 14
Sada ćemo na atribut style vezati varijablu “styleObject” na sljedeći način:
Sintaksa niza
Vue.js također nudi mogućnost povezivanja više varijabli u sintaksi niza s jednom HTML oznakom, kako slijedi:
Više vrijednosti
Slično tome, također možemo dati više vrijednosti koristeći sintaksu niza CSS svojstvu unutar ugrađenog vezanja, kako slijedi:
Ovo su neki od različitih načina na koje možemo koristiti za vezivanje varijabli s atributom style za dinamičku promjenu stila web stranice.
Sažetak
Ovaj je članak obuhvatio sintaksu vezanja umetnutog stila. Također ste naučili o sintaksi objekta i sintaksi polja koja se koriste za povezivanje vrijednosti ili varijabli s atributima stila u vue.js. Ako se ovaj članak pokazao korisnim za bolje razumijevanje vue.js, slobodno nastavite čitati na linuxhint.com za korisniji sadržaj.
