Phenquestions
Vue.js використовується для побудови користувальницьких інтерфейсів (UI) та односторінкових програм (SPA). Легко навчитися користуватися Vue.js та рамки свободи та комфорту, доступні під час розробки програм у цій програмі, оскільки вона має найкращі поєднані функції Angular та ReactJS. Саме тому він відомий своїм простим у користуванні та чистим кодуванням.
Vue.js забезпечує прив'язку стилів, яку можна використовувати для динамічної зміни стилю. Ви можете прив’язати змінну до атрибуту style у будь-якому тегу HTML і змінити стиль, коли зміну пов’язаної змінної змінено. У цій статті ми розглянемо, як використовувати прив’язку стилів та змінити стиль змінних за допомогою vue.js.
Вкладене вкладання стилів
У відповідь.js, ми можемо прив’язати змінні до атрибутів стилю за допомогою директив v-bind.
Синтаксис об’єкта
Як і вбудований стиль CSS, ми також можемо робити вбудований стиль у Vue.js, використовуючи директиву v-bind та синтаксис фігурних дужок. Ви можете прив’язати будь-яку змінну до атрибуту style, використовуючи такий сценарій:
І, в тегу сценарію та даних:
ata ()повернути
colorVar: 'червоний',
Розмір шрифту: 14
Ми також можемо звести об’єкт до даних і пов’язати цей об’єкт з атрибутом style, щоб наш HTML виглядав чистішим наступним чином:
дані ()повернути
styleObject:
colorVar: 'червоний',
Розмір шрифту: 14
Тепер ми прив’яжемо змінну “styleObject” до атрибуту style наступним чином:
Синтаксис масиву
Vue.js також надає можливість прив'язки кількох змінних у синтаксисі масиву до одного тегу HTML, як показано нижче:
Кілька значень
Подібним чином ми можемо також надавати кілька значень за допомогою синтаксису масиву властивості CSS у межах вбудованого прив'язки, як показано нижче:
Це кілька різних способів, якими ми можемо скористатися для прив’язки змінних з атрибутом style для динамічної зміни стилю веб-сторінки.
Резюме
У цій статті розглянуто синтаксис прив’язки вбудованого стилю. Ви також дізналися про синтаксис об'єкта та синтаксис масиву, що використовуються для прив'язки значень або змінних до атрибутів стилю у vue.js. Якщо ця стаття виявилася корисною для кращого розуміння суті.js, сміливо продовжуйте читати на linuxhint.com для отримання більш корисного вмісту.
