#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: Concept: Repeating data
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's review this idea of rendering repeated data. We saw that we used the double handlebars or double mustaches to render just plain text.
0:09
But, if we've got some kind of loop some kind of iteration that we need to do, for example here we have these movies
0:16
and we want to show some piece of HTML for each movie. Well, you can use the v-for. Remember, most of the commands start with v-
0:24
as in view, and then the for command. So we can loop over the movies from our model from our data, it's an array in Javascript
0:31
and then we're going to get a local loop variable called m which we can then use over here. So we're going to render the title
0:38
and we're going to even uppercase it by calling a function on m.title.toLocaleUpperCase. Pretty straightforward, right?
0:44
I guess one additional thing to emphasize here is the element that actually has the v-foron it is also replicated.
0:51
So, what we're going to get is a div with the class movie and then containing a div with class title
0:57
for each movie and when we do the v-for. There you go. You've got data you got to repeat, well, v-for.