Join Michael Sullivan for an in-depth discussion in this video Rendering lists with v-for, part of Learning Vue.js.
- [Instructor] Now that we have some data…in an array that we can work with,…let's talk about how we can loop through it…to display a collection of elements.…First, I'm going to quickly setup…an HTML table for this data.…Table is one of those older HTML elements…that gets a bad rap today…because its use has mostly been replaced by…divs in CSS and different types of grid systems,…but for actually displaying a table of data…it's perfectly appropriate,…and the latest version of Bootstrap…even has some nice table styles that we can use.…
We'll just have to add class="table" to activate them.…Then we'll add a header row with <thead>,…and we can make this a different color…with class thead-light or thead-dark.…Let's try thead-light for now.…To keep things simple,…we're gonna look at…just two properties of each asteroid,…the name and the close approach date.…(keys typing)…That's the date, when it will or when it did,…come closest to earth.…
Next we'll have our <tbody>…with a <tr> row and two cells.…(keys typing)…And one last thing I'm gonna do…
- Adding Vue to a webpage
- Thinking declaratively with data binding
- Methods and event handling
- Adding dynamic style and class attributes
- Using CSS transitions and animations
- Using Vue components
- Vue CLI
Skill Level Intermediate
Web Programming Foundationswith Morten Rand-Hendriksen58m 44s Beginner
What you should know1m 29s
1. The Simplest Form
2. Essential Directives, Options, and Tools
3. Enhancing User Interfaces
4. Vue Components
Next steps2m 32s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.