Phenquestions
Vue.js wordt gebruikt om gebruikersinterfaces (UI's) en Single-Page Applications (SPA's) te bouwen. Het is gemakkelijk om Vue how te leren gebruiken.js en het raamwerk van vrijheid en comfort dat beschikbaar is tijdens het ontwikkelen van applicaties in dit programma omdat het de best gecombineerde functies van Angular en ReactJS heeft. Daarom staat het bekend om zijn gebruiksvriendelijke en schone codering.
Vue.js biedt stijlbinding die u kunt gebruiken om de stijl dynamisch te wijzigen. U kunt een variabele binden aan het stijlkenmerk in elke HTML-tag en de stijl wijzigen wanneer de gebonden variabele wordt gewijzigd. In dit artikel zullen we bekijken hoe u stijlbinding kunt gebruiken en hoe u de stijl van variabelen kunt wijzigen met vue.js.
Inline stijl binding
In zicht.js, kunnen we variabelen binden aan stijlattributen met behulp van v-bind-richtlijnen.
Objectsyntaxis
Net als bij inline CSS-styling, kunnen we ook inline-styling doen in Vue.js met behulp van v-bind-richtlijn en accolades-objectsyntaxis. U kunt elke variabele aan het stijlkenmerk binden met behulp van het volgende script:
En in de scripttag en gegevens:
ata()retour
colorVar: 'rood',
lettergrootte: 14
We kunnen het object ook naar de gegevens brengen en dat object binden met het stijlkenmerk om onze HTML er als volgt schoner uit te laten zien:
gegevens()retour
stijlObject:
colorVar: 'rood',
lettergrootte: 14
Nu zullen we de variabele "styleObject" als volgt aan het stijlkenmerk binden:
Matrixsyntaxis
Vue.js biedt ook de mogelijkheid om meerdere variabelen in arraysyntaxis te binden aan de enkele HTML-tag, als volgt:
Meerdere waarden
Op dezelfde manier kunnen we ook meerdere waarden geven met behulp van de array-syntaxis aan een CSS-eigenschap binnen de inline-binding, als volgt:
Dit zijn enkele van de verschillende manieren die we kunnen gebruiken voor het binden van variabelen met het stijlkenmerk om de stijl van een webpagina dynamisch te wijzigen.
Samenvatting
Dit artikel behandelt de syntaxis voor bindende inline-styling. U hebt ook geleerd over de objectsyntaxis en arraysyntaxis die worden gebruikt om de waarden of variabelen te binden aan stijlkenmerken in vue.js. Als dit artikel nuttig is gebleken om u een beter begrip te geven van vue.js, lees gerust verder op linuxhint.com voor meer nuttige inhoud.
