LU05e - v-for

1. I can explain what function v-for directives fulfil within the DOM.
2. I can explain which data types v-for is suitable for.
3. I can name the list display variants that are possible with v-for.

W3School v-for

The v-for directive in Vue.js is a powerful tool for rendering (the process of converting data, code or digital instructions into a visual representation on the screen) lists of elements in HTML templates. It allows developers to iterate through a data source and create a template element for each element in the data source (e.g. array). In addition to basic lists, v-for can also be used to iterate (loop through) a series of numbers, object properties or even nested structures. By combining it with other directives such as v-bind and v-on, v-for extends the possibilities of interactive data binding in Vue applications.

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ index + 1 }}. {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  }
};
</script>

Explanation

• The v-for=„(item, index) in items“ directive loops through the items array.
• :key=„index“ helps Vue track each element efficiently.
• The output will be a list displaying „Apple,“ „Banana,“ and „Cherry“ in order.

Volkan Demir