LU05.A16 - v-for list rendering

• Work type: Individual
• Means of aid: only teaching materials, no websearch, no use of ai.
• Timeframe: 10 Minutes
• Expected result: A Vue script that uses he v-for directive

1. Be able to explain the objective of v-for
2. Displying the ndex and corresponding array entry using v-for.
3. Dispalying array elements and the corresponding images with v-for.

• v-for code-example

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. Go to the link to the task mentioned in the source and save it with the appropriate name in your W3School workspace.
2. Let it run 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.

Lösung

Volkan Demir