Phenquestions
Vue.js sa používa na vytváranie používateľských rozhraní (UI) a jednostránkových aplikácií (SPA). Je ľahké sa naučiť používať Vue.js a rámec slobody a pohodlia, ktorý je k dispozícii pri vývoji aplikácií v tomto programe, pretože má najlepšie kombinované funkcie Angular a ReactJS. Preto je známy svojim ľahko použiteľným a čistým kódovaním.
Vue.js poskytuje viazanie štýlov, ktoré môžete použiť na dynamickú zmenu štýlu. Premennú môžete naviazať na atribút style v ľubovoľnej značke HTML a zmeniť štýl pri zmene viazanej premennej. V tomto článku sa pozrieme na to, ako používať väzbu štýlov a ako meniť štýl premenných pomocou vue.js.
Väzba vloženého štýlu
Vue.js, môžeme viazať premenné na atribúty štýlu pomocou príkazov v-bind.
Syntax objektu
Rovnako ako v prípade vloženého štýlu CSS, môžeme vytvoriť vložený štýl aj vo Vue.js pomocou smernice v-bind a zloženej zloženej zátvorky objektu. Ľubovoľnú premennú môžete viazať na atribút štýlu pomocou nasledujúceho skriptu:
A v značke skriptu a údajoch:
ata ()návrat
colorVar: 'červená',
veľkosť písma: 14
Môžeme tiež vziať objekt dole na dáta a spojiť ho s atribútom style, aby náš HTML vyzeral čistejšie nasledovne:
data ()návrat
styleObject:
colorVar: 'červená',
veľkosť písma: 14
Teraz budeme viazať premennú “styleObject” na atribút style takto:
Syntax poľa
Vue.js tiež poskytuje možnosť naviazať viac premenných v syntaxi poľa na jednu značku HTML, a to nasledovne:
Viaceré hodnoty
Podobne môžeme tiež dať viac hodnôt pomocou syntaxe poľa k vlastnosti CSS v rámci inline väzby, a to nasledovne:
Existuje niekoľko rôznych spôsobov, ktoré môžeme použiť na viazanie premenných pomocou atribútu štýl na dynamickú zmenu štýlu webovej stránky.
Zhrnutie
Tento článok sa venoval syntaxe viazania vloženého štýlu. Dozvedeli ste sa tiež o syntaxi objektu a syntaxi poľa, ktoré sa používajú na viazanie hodnôt alebo premenných na atribúty štýlu vue.js. Ak sa vám tento článok osvedčil pri lepšom porozumení vue.js, pokojne pokračujte v čítaní na linuxhint.com pre užitočnejší obsah.
