Phenquestions
Vue.js се използва за изграждане на потребителски интерфейси (UI) и приложения с една страница (SPA). Лесно е да се научите как да използвате Vue.js и рамката на свобода и комфорт, която е достъпна при разработването на приложения в тази програма, тъй като има най-добре комбинираните функции на Angular и ReactJS. Ето защо е известен със своето лесно за използване и чисто кодиране.
Vue.js осигурява обвързване на стил, което можете да използвате за динамична промяна на стила. Можете да свържете променлива с атрибута style във всеки HTML таг и да промените стила, когато обвързаната променлива е променена. В тази статия ще разгледаме как да използваме обвързване на стилове и да променим стила на променливите с помощта на vue.js.
Вградено обвързване на стил
В отговор.js, можем да обвържем променливи с атрибути на стил, като използваме директивите v-bind.
Синтаксис на обекта
Точно както при вградения CSS стил, ние също можем да направим вграден стил в Vue.js, използвайки директивата v-bind и синтаксиса на обектите с фигурни скоби. Можете да свържете всяка променлива към атрибута стил, като използвате следния скрипт:
И в маркера на скрипта и данните:
ata ()връщане
colorVar: „червен“,
fontSize: 14
Също така можем да свалим обекта до данните и да го обвържем с атрибута style, за да направим HTML да изглежда по-чист, както следва:
данни()връщане
styleObject:
colorVar: 'червен',
fontSize: 14
Сега ще свържем променливата “styleObject” към атрибута style, както следва:
Синтаксис на масива
Vue.js също предоставя опцията за свързване на множество променливи в синтаксиса на масива към единичния HTML таг, както следва:
Множество стойности
По същия начин можем да дадем множество стойности, използвайки синтаксиса на масива, на CSS свойство в рамките на вграденото свързване, както следва:
Това са някои от различните начини, които можем да използваме за обвързване на променливи с атрибута style за динамична промяна на стила на уеб страница.
Обобщение
Тази статия обхваща синтаксиса за свързване на вградения стил. Също така научихте за синтаксиса на обекта и синтаксиса на масива, използвани за обвързване на стойностите или променливите към атрибутите на стила в vue.js. Ако тази статия се окаже полезна, за да ви даде по-добро разбиране на vue.js, не се колебайте да продължите да четете в linuxhint.com за по-полезно съдържание.
