Vue.js Spremeni slog

Vue.js se uporablja za izdelavo uporabniških vmesnikov (UI) in aplikacij za eno stran (SPA). Preprosto se je naučiti, kako uporabljati Vue.js in okvir svobode in udobja, ki je na voljo med razvojem aplikacij v tem programu, ker ima najbolje kombinirane funkcije Angular in ReactJS. Zato je znan po enostavnem in čistem kodiranju.

Vue.js ponuja vezavo sloga, ki jo lahko uporabite za dinamično spreminjanje sloga. Spremenljivko lahko vežete na atribut sloga v kateri koli oznaki HTML in spremenite slog, ko spremenite vezano spremenljivko. V tem članku si bomo ogledali, kako uporabiti vezavo sloga in spremeniti slog spremenljivk s pomočjo vue.js.

Vezava v vrstici

V vue.js, lahko spremenljivke na atribute sloga vežemo s pomočjo direktiv v-bind.

Sintaksa predmeta

Tako kot pri vrstnem oblikovanju CSS, lahko tudi v Vueju naredimo vrstni slog.js z uporabo v-bind direktive in sintakso predmeta v kodrastih oklepajih. Na atribut sloga lahko vežete katero koli spremenljivko z naslednjim skriptom:

In v oznaki skripta in podatkih:

Predmet lahko prenesemo tudi v podatke in ga povežemo z atributom style, da bo naš HTML videti bolj čist, kot sledi:

Zdaj bomo spremenljivko “styleObject” vezali na atribut style, kot sledi:

Sintaksa matrike

Vue.js ponuja tudi možnost vezave več spremenljivk v sintaksi matrike na eno oznako HTML, kot sledi:

Več vrednosti

Podobno lahko z uporabo sintakse matrike damo tudi več vrednosti lastnosti CSS znotraj vstavljene vezave, kot sledi:

To je nekaj različnih načinov, ki jih lahko uporabimo za vezavo spremenljivk z atributom style za dinamično spreminjanje stila spletne strani.

Povzetek

Ta članek je zajemal sintakso vezave vrstice. Spoznali ste tudi sintakso objekta in sintakso matrike, ki se uporabljajo za vezavo vrednosti ali spremenljivk na atribute sloga v vue.js. Če se vam je ta članek izkazal v pomoč pri boljšem razumevanju vue.js, vas prosimo, da nadaljujete z branjem na linuxhint.com za bolj uporabno vsebino.