You can implement conditional rendering with v-if directive. Because v-if is a directive, it has to be attached to a single element. v-for directive can be used for displaying a list of items using the data from an Array
Instructor: 00:00 You can use v-if directive to implement the conditionals. I have already created the IsResults property. It's a Boolean Property. I can bind this property here. IsResults is true. Let's try to test it.
00:18 Now you can see the results. Let me show you the magic of Vue, Vue Reactivity. Let's try to test the Vue Reactivity. App.IsResults, I'm going to set it to false.
00:31 Boom, there is no DOM element here. That is the magic of Vue Reactivity. If I will set it to true, you will see the DOM element. Now you can see the results.
00:43 Let me show you how to use v-for directive. I have Companies array. Let me use the inaudible list. I am going to apply v-for directive to render all the list items. C in, and I need to specify the name of the array, which is Companies.
01:01 Here, I am going to log or print the name, C.name. Let's try to test it. Boom, Egghead, Google, Facebook. Let's say, what will happen if I update the Companies array? Companies.
01:20 Let's say I'm going to create a new array and I will like to have only one company, LinkedIn. Cool. You can see that. There is only one LinkedIn company here. If you check the Companies, you will see the LinkedIn companies.
01:37 Here is the Vue Reactivity. They have added a lot of observer properties. Zero and the name is LinkedIn.