Vue.js Vaihda tyyli

Vue.js: ää käytetään käyttöliittymien (UI) ja yhden sivun sovellusten (SPA) rakentamiseen. Vue on helppo oppia käyttämään.js ja vapauden ja mukavuuden kehys, joka on käytettävissä kehitettäessä sovelluksia tässä ohjelmassa, koska siinä on Angularin ja ReactJS: n parhaat yhdistetyt ominaisuudet. Siksi se tunnetaan helppokäyttöisestä ja puhtaasta koodauksestaan.

Vue.js tarjoaa tyylinsidonnan, jonka avulla voit muuttaa tyyliä dynaamisesti. Voit sitoa muuttujan tyylimääritteeseen missä tahansa HTML-tagissa ja muuttaa tyyliä, kun sidottua muuttujaa muutetaan. Tässä artikkelissa tarkastelemme, miten tyylin sidontaa käytetään ja muuttujien tyyliä muutetaan vue: lla.js.

Inline-tyylinen sidonta

Vue.js, voimme sitoa muuttujia tyylimääritteisiin käyttämällä v-sitovia direktiivejä.

Objektin syntakse

Aivan kuten inline CSS -tyylin yhteydessä, voimme tehdä myös inline-tyylin Vue-mallissa.js käyttäen v-sidosdirektiiviä ja kiharoiden aaltosulkuobjektien syntaksia. Voit sitoa minkä tahansa muuttujan tyylimääritteeseen seuraavalla komentosarjalla:

Ja komentotunnisteessa ja tiedoissa:

ata ()
paluu
colorVar: 'punainen',
fontin koko: 14

Voimme myös viedä objektin tietoihin ja sitoa kyseisen objektin tyylimääritteellä, jotta HTML: stämme näyttää puhtaampaa seuraavasti:

data ()
paluu
styleObject:
colorVar: 'punainen',
fontKoko: 14

Sitoudumme muuttujan "styleObject" tyylimääritteeseen seuraavasti:

Taulukon syntaksi

Vue.js tarjoaa myös mahdollisuuden sitoa useita muuttujia taulukon syntaksissa yhteen HTML-tagiin seuraavasti:

Useita arvoja

Vastaavasti voimme myös antaa useita arvoja taulukon syntaksin avulla CSS-ominaisuudelle inline-sidonnassa seuraavasti:

Nämä ovat joitain eri tapoja, joilla voimme sitoa muuttujia tyylimääritteen avulla verkkosivun tyylin muuttamiseksi dynaamisesti.

Yhteenveto

Tämä artikkeli käsitteli sisäisen tyylin sitomisen syntaksia. Opit myös objektisyntaksista ja taulukon syntaksista, joita käytetään arvojen tai muuttujien sitomiseen vue-tyylimääritteisiin.js. Jos tämä artikkeli osoittautui hyödylliseksi antaa sinulle paremman käsityksen vue.js, voit jatkaa lukemista linuxhintillä.fi lisää hyödyllistä sisältöä.