Phenquestions
Vue.js se používá k vytváření uživatelských rozhraní (UI) a jednostránkových aplikací (SPA). Je snadné se naučit používat Vue.js a rámec svobody a pohodlí, který je k dispozici při vývoji aplikací v tomto programu, protože má nejlépe kombinované funkce Angular a ReactJS. Proto je známý pro své snadno použitelné a čisté kódování.
Vue.js poskytuje vazbu na styl, kterou můžete použít k dynamické změně stylu. Proměnnou můžete svázat s atributem stylu v libovolné značce HTML a změnit styl při změně vázané proměnné. V tomto článku se podíváme na to, jak používat vazbu stylů a měnit styl proměnných pomocí vue.js.
Vazba inline stylu
Na pohled.js, můžeme vázat proměnné na atributy stylu pomocí direktiv v-bind.
Syntaxe objektu
Stejně jako u inline stylů CSS můžeme také provádět inline styling ve Vue.js pomocí direktivy v-bind a složených složených závorek syntaxe objektu. Libovolnou proměnnou můžete svázat s atributem stylu pomocí následujícího skriptu:
A ve značce skriptu a datech:
ata ()vrátit se
colorVar: 'červená',
velikost písma: 14
Můžeme také vzít objekt dolů na data a svázat tento objekt s atributem stylu, aby náš HTML vypadal čistěji takto:
data ()vrátit se
styleObject:
colorVar: 'červená',
velikost písma: 14
Nyní budeme proměnnou „styleObject“ svázat s atributem style následujícím způsobem:
Syntaxe pole
Vue.js také poskytuje možnost vázat více proměnných v syntaxi pole na jednu značku HTML, a to následovně:
Více hodnot
Podobně můžeme také dát více hodnot pomocí syntaxe pole k vlastnosti CSS v rámci vložené vazby, a to následovně:
Toto jsou některé z různých způsobů, které můžeme použít k vázání proměnných pomocí atributu style k dynamické změně stylingu webové stránky.
souhrn
Tento článek se zabýval syntaxí vazby inline styling. Také jste se dozvěděli o syntaxi objektu a syntaxi pole použitých k vytvoření vazby hodnot nebo proměnných na atributy stylu v vue.js. Pokud se vám tento článek osvědčil při lepším porozumění vue.js, klidně pokračujte ve čtení na linuxhint.com pro užitečnější obsah.
