Vuejs is one of the open-source JavaScript frameworks used widely in many companies for building user interfaces. The reason why it is used by many people and companies is the great features it provides for creating interfaces. Perhaps, the most significant of these features are the attributes called directives.
In this article, we will cover two of them for conditional and list rendering, v-if and v-for. Let’s get started.
Conditional Rendering
When you want to render a block element based on a condition in your template, you can use the built-in directives v-if, v-else and v-else-if. The block element will be rendered If the expression of one of the directives returns a truthy value.
Let’s create an example to see how it works.
List Rendering
Items in an array or keys in an object can be rendered using the v-for directive. The v-for directive works similarly to the forEach method in JavaScript. As with the use of the forEach method, we can inject an element in an array and its index into the template with the v-for directive.
Let’s take a look at its usage.
Conclusion
In this article, we’ve covered the v-for and v-if directives used for conditional and list rendering
in VueJS, which are similar to conditional and loop constructs in JavaScript.
Thank you for reading.