LU05e - v-for

1. ….

The v-for directive in Vue.js is used to render a list of items by iterating over an array or object. It follows the syntax v-for=„item in items“, dynamically generating elements. To optimize performance, it's recommended to use a unique key attribute, ensuring efficient updates and reactivity 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