Simplifying your template with v-for

The directive covered in this section is called v-for and will be used to render a list of elements. If you have learned any programming language, you have probably been exposed to the concept of a for loop. for loops are used in programming languages to iterate through a list one entry at a time, and the v-for directive is no different.

Using v-for allows us to render a specific list by re-rendering the same element (or set of elements) multiple times. Using v-for not only simplifies our HTML, but also allows us to render dynamic lists that would be impossible to render ahead of time unless we knew the actual number of entries.

Let’s see how the native HTML implementation and a Vue.js implementation of a simple list compare:

Figure 4.6: Comparison of native HTML and Vue.js implementations of a list

As shown, the implementation of a v-for directive is very similar to other for loops that you may have seen...