Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Vue.js Basics!
You have completed Vue.js Basics!
Preview
Learn how to loop through a data structure and keep code DRY using Vue's v-for directive.
Further Reading
v-for Syntax
<div id="app">
<ul>
<li v-for="item in list">
<p>{{ item }}</p>
</li>
</ul>
</div>
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
I can't see you of course, but I'm willing
to guess there aren't a ton of hands up.
0:00
A lot of programming involves looping
through items in an array, and
0:00
doing something to those items.
0:03
Maybe you're pulling out
specific information,
0:05
sorting the lists in some way,
attaching event handlers.
0:07
There are a ton of reasons why we
might wanna loop through a list.
0:10
If you've built a JavaScript application
in the past, you may have looped
0:14
through a list, and used the information
to build up a string of HTML.
0:17
Perhaps that string of HTML grew large and
unwieldy, not so with Vue.
0:21
I have here an array containing
the seven colors of the rainbow.
0:27
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up