Vue.js Watch Property

Vue.js е много мощна и реактивна Javascript рамка, която се използва за изграждане на Uis (потребителски интерфейси) и SPA (приложения с една страница). Той е изграден чрез комбиниране на най-добрите функции от вече съществуващите рамки Angular и response. Разработчиците също обичат да кодират или изграждат приложения в него.

Vue.js предоставя свойството watch да наблюдава и реагира на променливите или промяната на данните. Можем да използваме свойството watch, за да манипулираме DOM, когато наблюдаваната променлива се промени. В тази статия ще разгледаме как можем да използваме свойството на часовника и да изпълним желаните задачи при промяната на променливата. И така, нека започнем.

Наблюдатели

A наблюдател във Vue.js действа като слушател на събития към променлива или свойство. Използва се за изпълнение на няколко задачи по промяната на някои специфични свойства. Той е полезен при изпълнение на асинхронни задачи.

Нека да демонстрираме и разберем концепцията на наблюдателя, като разгледаме пример.

Пример:

Да предположим, че изграждаме уебсайт за електронна търговия, в който имаме списък с артикули и го изграждаме количка или компонент за плащане. В този компонент трябва да изчислим количеството на един елемент по отношение на броя на артикулите.

Първо, приемаме някои свойства в данните.

данни()
връщане
itemName: "Артикул 1",
itemQuantity: null,
артикул Цена: 200,
общоЦена: 0

,

В който ще наблюдаваме свойството “itemQuantity” и ще изчислим общата цена. Първо ще направим обвързването на данните в шаблона,

преди да напишете кода за гледане на променливата и изчисляване на общата цена.

След като напишем този код, ще имаме нашата уеб страница по следния начин:

Сега искаме да променим общата цена при промяната на “itemQuantity”, както всеки път, когато потребителят промени количеството, като използва полето за въвеждане. Общата цена трябва да се промени. За тази цел ще трябва да наблюдаваме “itemQuantity” и да изчисляваме общата цена, когато свойството “itemQuantity” се промени.

И така, наблюдателят за “itemQuantity” ще бъде по следния начин:

гледам:
itemQuantity ()
това.totalPrice = това.itemQuantity * това.itemPrice;
конзола.log (това.itemQuantity);

Сега, всеки път, когато потребителят промени “itemQuantity”, общата цена ще бъде променена за един момент. Вече не трябва да се притесняваме за нищо. Собствеността на часовника ще се погрижи за това изчисление сега.

Нека да разгледаме уеб страницата:

И нека се опитаме да увеличим или променим количеството и да видим някои резултати:

Ако променим количеството, да речем „4“, общата цена ще бъде „800“:

По същия начин, ако променим количеството на „7“, общата цена ще бъде „1400“:

Така че, това е начина, по който часовникът работи и помага за реактивно развитие. Реактивността е вид подпис на Vue.js. Също така, свойството на часовника е полезно при извършване на асинхронни операции.

Заключение

В тази статия научихме какво е свойство на часовника и как можем да го използваме във Vue.js. Опитахме и пример от реалния живот, за да разберем истинското му изпълнение. Това помага много за спестяване на време и ускоряване на процеса на разработка. Надяваме се, че тази статия ви е била полезна и продължавате да посещавате linuxhint.com за по-добро разбиране.