From the course: Learning Vue.js
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Looping and list rendering with v-for - Vue.js Tutorial
From the course: Learning Vue.js
Looping and list rendering with v-for
- In this video, we'll talk about how to use the v-for directive to iterate over a collection of items and render a series of related DOM elements. Our example for this exercise will be a card manager page, which shows all of the cards in a list and allows the user to edit them. So I've created a skeleton page that looks similar to where we started in chapter one. For each card I want to show the front and the back side by side. So that the user can see the whole deck at a glance. To start, I'm going to add a div with the class card pair. And that will allow me to place two child divs inside, each with class card. And these will be lined up nicely with Flexbox with the help of some CSS that's already in our style sheet. So again, we have our cards array in our data down here. And what we want to do is iterate over that array, and render a card pair div for every element. So we're going to add v-for to this card pair div.…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.