vue v-for loop array

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

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

Explanation:

1. <template>: Vue template tag.
2. <div>: Division container in the template.
3. <ul>: Unordered list HTML element.
4. <li v-for="(item, index) in items" :key="index">: Vue directive v-for to iterate through items array. (item, index) destructuring syntax used to access each item and its index. :key="index" assigns a unique key to each list item.
5. {{ item }}: Interpolation syntax to display the current item value.
6. </li>: Closing tag for list item.
7. </ul>: Closing tag for unordered list.
8. </div>: Closing tag for division container.
9. <script>: JavaScript script tag within Vue file.
10. export default { ... }: Exporting Vue component options.
11. data() { ... }: Vue data option to define reactive data.
12. items: ['Apple', 'Banana', 'Orange']: Initializing items array with strings 'Apple', 'Banana', and 'Orange'.