In this lesson, let's create our own custom directive. We'll call it vPurple. This directive's purpose will be to change the color of the element it's bound to to, well, you guessed it, purple. Over on the right-hand side, though, you can see that nothing is working yet.
That's because we haven't actually created the directive. So let's do that. All we have to do inside of Script Setup is to define a function with the v prefix. and it will be available to the template as a directive.
A directive takes the element that it's bound to as its first argument. Thus, all that's left to do is to target the style property on the element and change its color to purple. And then I'll give our preview a refresh. Perfect.
js. In this lesson, let's create our own custom directive. We'll call it vPurple. This directive's purpose will be to change the color of the element it's bound to to, well, you guessed it, purple.
Over on the right-hand side, though, you can see that nothing is working yet. That's because we haven't actually created the directive. So let's do that. All we have to do inside of Script Setup is to define a function with the v prefix.
and it will be available to the template as a directive. A directive takes the element that it's bound to as its first argument. Thus, all that's left to do is to target the style property on the element and change its color to purple. And then I'll give our preview a refresh.
Perfect. js.