Another thing that you're to be using directives for is to implement conditional logic into your programs. Let's imagine that we wanted to control whether this image was seen or wasn't seen. A good example would be: let's say that this image is something that's protected and only someone that is logged into the system should be able to see it.

Well, we can use a conditional directive in order to make that possible. So here if I say: <div> and then it's going to close it out for me, but I will go and I want to wrap the entire image up in this div. What I can do here is I can say: v-if.

Now we can not use the colon syntax that we used down here for this so we have to say v-if=. Then what we put inside of this string is going to be what gets checked. So let's take a base case scenario. Because we know that this is going to look at our component, we could pass in some data.

I could create something, this is what we will do later, where I could create a value here called show image and then it would be a boolean value so you would either be true or false. What I'm going to do here is show you that you don't technically even need to do that. You can just pass in true here.

This is going to get resolved as true says would be the same thing as if you add some javascript code. Something like this, and you said if (true), and then inside of here, you'd say do something. So that's exactly what the vue-if directive is going to allow us to do.

I'm going to hit save here, and as you can see it's still showing up. That's not really magical. It was showing up before.

Now watch what happens though. If I change true here, even though it's a string because it gets treated like JavaScript because this is a directive. If I say v-if=false, and now if I come here you can see that the image is gone.

That is a very basic way of implementing conditionals. Now the way that it works is when you've added a conditional directive to a tag, directly to a tag, exactly like how we've done right here. Anything inside of that element. I know we just have one image here, but let's say that we put everything inside of it.

If I hit save now, you'd see that our greeting has gone as well.

So anything that is nested inside of that conditional is going to be treated the same way. So let's go and put that back. Now, let's actually finish out the implementation because it's going to be very rare that you're ever going to say v-if=false. Instead you're going to call a data element here.

The convention, whenever you're building out something that is going to show or hide a value, is to say something like show image. Then this value is going to be called from our list of data elements. Here, I'm going to add onto this list. So I'll say: Let's set it to true by default.

new Vue({
    el: "#app",
    data: {
        name: "Kristine",
        imgWidth: 150,
        showImg: true,
  },

If I hit save and come back you can see that this image is showing up.

From a data flow perspective, what's going on is we're saying: if this gets resolved as JavaScript, and specifically as vue javascript code, so if we say if we pass in this directive it's going to go to our component file, it's going to look for something called showImg, and then it's going to see whatever that value is. That is how you can use a basic conditional inside of a directive with vue.

Resources

• Source Code