![]() The key that we want to apply to our event is (as shown above) We can do so by adding key modifiers to the events as follows. Consider we have a textbox and we want the method to be called only when we press Enter. ![]() VueJS offers key modifiers based on which we can control the event handling. On the click of the link, it will display the alert message and does not open the url anymore. The prevent modifier prevents the link from opening and only executes the method assigned to the tag. Once added, if we click on the button, it will send an alert message and will not open the link anymore. In case we don’t want the link to open up, we need to add a modifier ‘prevent’ to the event as shown in the following code. If we click the clickme link, it will send an alert as “Anchor tag is clicked” and it will open the link in a new tab as shown in the following screenshots. On every click, the value is incremented and displayed.įollowing is the output we get in the browser.prevent ![]() On the click of the second button, the same action is carried out, i.e. On the second click, the number is not incremented as the modifier prevents it from executing or performing any action item assigned on the click of the button. On the click of the first button, the variable clicknum increments by 1. Both the variables are initialized to 0 and the display is seen in the output above. Both are incremented when the button is clicked. There are two variables defined in the clicknum and clicknum1. The first button calls the method “buttonclickedonce” and the second button calls the method “buttonclicked”. The button with Click Once label has added the once modifier and the other button is without any modifier. In the above example, we have created two butttons. Let us use it in an example and understand the working of the once modifier. We need to add dot operator while calling the modifiers as shown in the syntax above. onceĪllows the event to execute only once. Vue has event modifiers available on v-on attribute. When we mouseover, the color will change to green as shown in the following screenshot. VUE KEYUP EVENT CODESimilarly, the following code is used to change it back to the original color. Using the stylobj variable, we are changing the color to green. In changebgcolor, we are changing the color to green using the following code. The same variable is binded to the div using v-bind:style = ”styleobj” We have created a styleobj variable and given the required style to be assigned to the div. Two events - mouseover and mouseout - is assigned to the div as shown above. Hence, during mouseover, a method is called changebgcolor and once we move the mouse out of the div, a method is called originalcolor. On mouseover, we are changing the color to green, and on mouseout we are changing the color back to red. ![]() It has been given a background color red. In the above example, we have created a div with width and height as 100px. We will now check one more event mouseover mouseout. On the click of the button, it will call the method ‘displaynumbers’, which takes in the event and we have consoled the same in the browser as shown above. There is a shorthand for v-on, which means we can also call the event as follows − The following code is used to assign a click event for the DOM element. Return this.total = this.num1+ this.num2 V-on is the attribute added to the DOM elements to listen to the events in VueJS. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |