Vue.js Muuda stiili

Vue.js kasutatakse kasutajaliideste (UI) ja üheleheliste rakenduste (SPA) loomiseks. Vue kasutamist on lihtne õppida.js ning vabaduse ja mugavuse raamistik, mis on saadaval selle programmi rakenduste väljatöötamisel, kuna sellel on kõige paremini ühendatud Angular ja ReactJS funktsioonid. Seetõttu on see tuntud oma hõlpsasti kasutatava ja puhta kodeerimise poolest.

Vue.js pakub stiili sidumist, mille abil saate stiili dünaamiliselt muuta. Muutuja saab siduda mis tahes HTML-märgendi stiili atribuudiga ja muuta stiili, kui seotud muutujat muudetakse. Selles artiklis uurime stiili sidumist ja muutujate stiili muutmist vue abil.js.

Sisseehitatud stiili sidumine

Vue.js, saame siduda muutujaid stiiliatribuutidega, kasutades v-bind direktiive.

Objekti süntaks

Täpselt nagu CSS-i sisese kujundamise puhul, saame ka Vue-siseselt kujundada.js, kasutades v-bind direktiivi ja lokkis traksidega objekti süntaksit. Järgmise skripti abil saate siduda mis tahes muutuja stiili atribuudiga:

Ja skripti märgendis ja andmetes:

ata ()
tagastama
colorVar: 'punane',
fontSize: 14

Samuti võime objekti viia andmete juurde ja siduda selle objekti atribuudiga style, et muuta meie HTML välimus puhtamaks järgmiselt:

andmed ()
tagastama
styleObject:
colorVar: 'punane',
fontSize: 14

Nüüd seome muutuja „styleObject” stiili atribuudiga järgmiselt:

Massiivi süntaks

Vue.js pakub ka võimalust siduda mitu massiivi süntaksis olevat muutujat ühe HTML-märgendiga järgmiselt:

Mitu väärtust

Samamoodi võime lisada mitu väärtust massiivi süntaksit kasutades CSS-i atribuudile sisese sidumise kaudu järgmiselt:

Need on mõned erinevad viisid, mida saame kasutada atribuudiga stiil muutujate sidumiseks veebilehe stiili dünaamiliseks muutmiseks.

Kokkuvõte

See artikkel käsitles tekstisisese kujundamise süntaksit. Õppisite ka objekti süntaksist ja massiivi süntaksist, mida kasutatakse väärtuste või muutujate sidumiseks vue stiiliatribuutidega.js. Kui see artikkel osutus abiks vue paremaks mõistmiseks.js, jätkake julgelt linuxhinti lugemist.com kasulikuma sisu saamiseks.