Phenquestions
Vue.js - це дуже вражаючий та реактивний фронтенд-фреймворк JavaScript, який використовується для швидкої та простої розробки інтерфейсних веб-сайтів. У цій публікації ви дізнаєтесь про властивість годинника, яке є одним з найбільш фундаментальних понять.
Vue.js надає властивість watch для перегляду змінної, і при зміні цієї змінної це дозволяє нам запускати функцію, щоб ми могли зробити динамічну взаємодію. Давайте спробуємо приклад і проведемо динамічну взаємодію за допомогою властивості Vue Watch.
Приклад
Спочатку ми спробуємо змінити якусь змінну одним натисканням кнопки, а потім, використовуючи властивість watch, ми будемо спостерігати за цією змінною та змінювати якусь іншу змінну для внесення динамічних змін на веб-сторінці.
По-перше, припустимо, що у нас є дві змінні.дані ()
повернути
buttonBool: true,
колір: "червоний"
І ми зв’язали змінну “buttonBool” елементом button у шаблоні.
Це сторінка тестування
Ми хочемо змінити колір тла, скажімо, поділу натисканням кнопки. Отже, спочатку створіть div у шаблоні.
Це сторінка тестування
Тепер давайте спочатку створимо властивість watch і змінимо стан змінної “color” при зміні змінної “buttonBool”.
дивитися:buttonBool ()
це.колір = !це.колір;
Гаразд! Останнім кроком залишається зміна класів div на зміну змінної кольору. Отже, давайте зробимо це, використовуючи функцію прив’язки класів Vue.js.
Це сторінка тестування
Тут я щойно призначив клас “red”, якщо стан змінної “color” є істинним, інакше “green”, якщо стан змінної кольору має значення “false”, а клас “box” призначається в будь-якому випадку.
CSS для надання ширини, висоти та кольору фону div має наступний вигляд.
Добре, після закінчення роботи з кодуванням моя веб-сторінка буде такою.
Тепер, коли я натискаю кнопку, колір фону вікна повинен змінюватися.
І ви можете бути свідком у gif-файлі вище, колір div змінюється натисканням кнопки. Це дивно, правильно!
Отже, ось як ми можемо використовувати Vue Watch для динамічної взаємодії на веб-сторінці.
Висновок
У цій публікації ми спробували змінити стан деякої змінної при натисканні або зміни іншої змінної за допомогою властивості watch Vue.js. Ми також внесли деякі динамічні зміни у веб-сторінку. Ми побачили, що за натисканням кнопки, в атрибуті on-click, ми змінили стан змінної та показали, що властивість watch спостерігало за змінною та виконувало певні дії, як-от зміна стану іншої змінної.
