Vue.JS Endre stil

Vue.JS brukes til å bygge brukergrensesnitt (UIS) og applikasjoner med en side (SPA). Det er lett å lære å bruke vue.JS og rammen for frihet og komfort som er tilgjengelig mens du utvikler applikasjoner i dette programmet fordi det har de bestkombinerte funksjonene til Angular og ReactJS. Det er derfor det er kjent for sin brukervennlige og rene koding.

Vue.JS gir stilbinding som du kan bruke til å endre stilen dynamisk. Du kan binde en variabel til stilattributtet i hvilken som helst HTML -tag og endre stilen når den bundne variabelen endres. I denne artikkelen vil vi se på hvordan du bruker stilbinding og endrer styling av variabler ved hjelp av vue.JS.

Inline -stilbinding

I vue.JS, vi kan binde variabler til stilattributter ved hjelp av V-BIND-direktiver.

Objektsyntaks

Akkurat som med inline CSS -styling, kan vi også gjøre inline styling i Vue.JS ved hjelp av V-Bind-direktiv og krøllete avgir objektsyntaks. Du kan binde hvilken som helst variabel til stilattributtet ved hjelp av følgende skript:

Og i skriptetoden og dataene:

Vi kan også ta objektet ned til dataene og binde dette objektet med stilattributtet for å få HTML -en vår til å se renere ut som følger:

Nå vil vi binde "StyleObject" -variabelen til stilattributtet som følger:

Array Syntax

Vue.JS gir også alternativet til å binde flere variabler i array -syntaks til den enkle HTML -taggen, som følger:

Flere verdier

Tilsvarende kan vi også gi flere verdier ved å bruke matrise -syntaks til en CSS -egenskap i inline -bindingen, som følger:

Dette er noen av de forskjellige måtene vi kan bruke til bindingsvariabler med stilattributtet til dynamisk å endre styling av en webside.

Sammendrag

Denne artikkelen dekket syntaks for bindende inline styling. Du lærte også om objektsyntaks og matrise -syntaks som brukes til å binde verdiene eller variablene til styleattributter i vue.JS. Hvis denne artikkelen viste seg å være nyttig i å gi deg en bedre forståelse av Vue.JS, fortsett gjerne å lese på Linuxhint.com for mer nyttig innhold.