From the course: Learning Vue.js
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Handling events with v-on - Vue.js Tutorial
From the course: Learning Vue.js
Handling events with v-on
- [Instructor] Now we'll see just how easy it is to respond to a click event in order to flip our card. I've removed the text fields that we were using in the last video, and also reintroduced our previous logic where we were checking the value of the flipped data property. If we want to allow the user to click anywhere on a card and have it flipped to show the back, all we have to do is set up a click handler on this div, using the v-on directive. So v-on:click. And then for the value, I can add a statement for what I want to happen. In this case, I want to toggle the Boolean value flipped. So we just set it to its opposite. So now when I refresh, I can click to flip the card as many times as I want. v-on also has a shorthand syntax. And it's an @ symbol instead of the v-on:. Again, this is very common so we'll be using this form throughout the rest of the course. Another thing that's overdue to be addressed…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.