Vue.js Watchers
While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That’s why Vue provides a more generic way to react to data changes through thewatchoption. This is most useful when you want to perform asynchronous or expensive operations in response to changing data.
With the help of an example, we will try to learn and use the Watch property.
watchers.html
In the above code, we have created two textboxes, one with hours and another with minutes. In data property, the hours and minutes are initialized to 0. There is a watch object created with two functions hours and minutes. In both the functions, the conversion from hours to minutes and from minutes to hours is done.
As we enter values inside any of the texboxes, whichever is changed, Watch takes care of updating both the textboxes. We do not have to specially assign any events and wait for it to change and do the extra work of validating. Watch takes care of updating the textboxes with the calculation done in the respective functions.
We can see the results in the browser.
Output:
Vue.js Binding
Now, we will learn how to manipulate or assign values to HTML attributes, change the style, and assign classes with the help of binding directive called v-bind in Vue.js.
We will try to understand why we need and when to use v-bind directive for data binding with the help of an example.
databinding.html:
Here, we have displayed a title variable and three anchor links. We have also assigned a value to the href from the data object.
Now, if we check the output in the browser and inspect, we will see the first two anchor links do not have the href correctly as shown below.
Output:
The first clickme shows the href as hreflink, and the second one shows it in {{hreflink}}, while the last one displays the correct url that we require.
Hence, to assign values to HTML attributes, we need to bind it with the directive v-bind as follows.
<a v-bind: href="hreflink" target="_blank"> Click Me </a>
Binding HTML Classes
To bind HTML class, we need to use v-bind: class. We will learn the need and use of class binding with the help of an example.
bindclass.html:
There is a div created with v-bind: class=” {active: isactive}”.
Here, isactive is a variable which is based on true or false. It will apply the class active to the div. In the data object, we have assigned the isactive variable as true. There is a class defined in the style .active with the background color as cyan.
If the variable isactive is true, the color will be applied otherwise not. Here is the output of the above code in a browser.
Output:
In the above image, we can see the background color is changed. So, we can say that the class = ”active” is applied to the div.
If you have any queries regarding this blog or need any help you can contact us on: contact@codersarts.com