LU05.S15 - v-for list rendering

• Download the file and copy the content into the code area of the W3School on the left hand side of the coding window.
• You can execute the code by pressing the run button
• The result will be presented in the right hand side of the window.

Data is often available as lists/arrays (concatenation of persons, for example). Previously, we prepared these lists in JavaScript using a loop and passed them to HTML for display. With v-for, we can now use the loop directly in JS, which makes things a lot easier.

1. Click on the provided link above and it with the appropriate name in your W3School workspace.
2. Execute it with Run. You will see that the array data in the script part is now displayed numbered in the browser.
3. Add 3-4 more entries to your food list, at the beginning, the middle part, and the end.
4. Change the <ol>-tag to <ul>-tag.
5. Note down your observation as code comments and save your work.

Source code of the solution

Volkan Demir