Learn Vue.js Step By Step: List Rendering

In our previous lesson, we've learned about Vue's Basic Data Binding. In this lesson we will be talking about List Rendering. This is simply displaying a list of items in your HTML based on an array of data. One of the use case for this is when you receive an array coming from an ajax request. We can use Vue's v-for directive for this.

So, let say I want to display a list of my favorite movies. How are we going to do that? Let's see it the snippet below:

<!DOCTYPE html>
<html>
<head>
<title>My Favorite Movies</title>
</head>
<body>
    <div id="app">
        <h2>My Favorite Movies</h2>
        <ul>
            <li v-for="movie in movies" v-text="movie.title"></li>
        </ul><br /><br />

        We can also use the mustache syntax instead of the v-text directive.
        <ul>
            <li v-for="movie in movies" >{{ movie.title }}</li>
        </ul>        
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
              movies: [
                    {title: 'The Shawshank Redemption'},
                    {title: 'Hachiko'},
                    {title: 'About Time'}
                ]
            }
        })
    </script>
</body>
</html>

As you can see, we have an array of objects in the movies property, and we iterates them using the v-for directive, then echoing them out using either v-text or mustache syntax ({{}}).

That's all for this lesson. We're just covering the basic and the most common use of the v-for directive. For more advance uses of this directive, please refer to the official documentation. See you in the next lesson!

Previous: Basic Data Binding Next: Event Listeners