Alright, welcome to another lecture on Vue JS introduction. So in this lecture, we'll be looking into conditional rendering. So we'll be looking into Vf directives. For example, there could be situation where you want to render a certain element, only a certain value is true or true or certain values false, right. So we're going to look into how to do that. To demonstrate that what we're going to do is we're going to create two forms.

So two components, essentially, we are going to create a login form. That should be logged out view, and another file that says, register form. So we'll start off with register form. It's going to be very simple, very simple. Remember, you should have only one main element so I'm having the main form. Inside this I'm going to have Okay, input placeholder.

Enter username. So similarly, enter. Password. They should be re enter password right? So we have the register form ready. And we're going to complicate it by adding form validation and all we just going to look into how to switch components.

So that's the register form and the login form will be very much similar. I have a scaffold ready, I can have this and I don't need to reenter the password. So just to identify which form is which we're going to have a heading that login form. And for registration, we are going to have just a form. All right. So now what we're going to do is we're going to remove the header header component that we imported from the last lecture.

And we're going to import the login register form and we're going to declare it instead of the components login and register. And now we can have both login. Or you can also have register. Right, if I save it, we can see we have the login form as a register form. So now we don't want these two forms to be displayed at once. We want them to be displayed conditionally.

So we want the user to be able to switch between these two forms, right? So let's have a data property. So inside the data property, we'll have a variable called as show login and that should be true right. So, now what we can do is for this component or for any element for that matter, we can have a direct to call as we if all right, so for Vf, inside this Vf, we can have a Boolean In our case, the boolean value is show logon, by, say show login. And since the registration component is different from login, we don't want to show that integration component for that we can say we have not show logon. So if I save and go back, we'll see only the login form.

The reason here is, it's basically true, and it is false. So I can replace them with false and replace them with true and that would be very much the same. So display login Vf surrender log in only if the value is true, or registered login only the value is false, right? So this true can also be replaced with show logon. And this can also be replaced with show not show logon. We can do this.

Otherwise, we also have another directive called SB ELLs. And if you have bills, we don't need to specify not show login. So if I save it, we're going to see the login form itself. Now one interesting thing, what we can do is we can we can create a button Let's switch forms. And we can have an event for that button. Switch forms and this event can have a method.

Inside this method, we can alter the value of show logon. So what I'm going to do is this dot show login is equal to not this dot show logon. Alright, so I'm basically altering the value of show logon property. So the show logon value is true, it change it to false. If it's false, it will change it to true. If I save it, now we have a button right?

So whenever I click the button, the value of show login will be toggled which means when you go to false and when it is false, login will disappear and register will appear. So I can do this any number of times I want to. Now we also have another directory called as VLC. So it's basically if S and L sub right so Instead of V, if one thing to note that it doesn't need to be exactly a variable, it can also have something kind of like an argument. So for example, if I have a variable that says value, and it is 10, and we have a value greater than five. So if I say that login will be displayed, and for switch forms, I can say, start value equals 11.

Right. So whenever I click the switch forms, what happens is the value changes to 11. And this we have will no longer be valid as it changes to the register on it. So what I can do is, I can say this dot value equal to four, so that now the wave condition is no longer going to be valid, hence, this will stop rendering and instead this register component will display. So, if I save it and I say switch forms, I can register. Alright, so that is conditional rendering, I hope you have an idea of what is conditional rendering by now.

So, it's very simple. So, it's basically using v if and v l We can also use VLC. It's very much similar to that. You can try it on your own. And in the next lecture we'll look into how to pass props or how to pass data into components and making these components dynamic. I'll see you in the next one.