Detailed explanation of the use examples of v-for in Vue3

v-forYes directive used to traverse arrays or objects in templates. It can be used to generate a set of elements, or to display list items in the DOM. Below isv-forBasic usage and some advanced examples:

Basic usage

Iterate through the array

When you have an array and want to generate a set of elements based on the contents of the array, you can usev-for。

<template>
  <ul>
    <li v-for="item in items" :key="">{{  }}</li>
  </ul>
</template>
<script setup>
import { ref } from 'vue';
const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
]);
</script>

In this example,v-for="item in items"Will go throughitemsArray, generate one for each element in the array<li>element.itemis the current array item every time the loop is.

:keyis a unique identifier that helps Vue identify the identity of each list item to optimize rendering performance. Traversal objects

You can also usev-forIterate over the key-value pairs of the object:

<template>
  <ul>
    <li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
  </ul>
</template>
<script setup>
import { ref } from 'vue';
const object = ref({
  name: 'Vue',
  version: '3.2.0',
  framework: 'JavaScript',
});
</script>

In this example,v-for="(value, key) in object"Traversal objectsobjectkey-value pairs, wherekeyis the key of the object,valueis the value of the object.

Using indexes

You can passv-forThe second parameter accesses the index of the current item:

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ index }}: {{  }}</li>
  </ul>
</template>
<script setup>
import { ref } from 'vue';
const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
]);
</script>

In this example,indexis the index of the current item in the array.

Nestingv-for

You canv-forNested another one inv-for,For example:

<template>
  <div>
    <div v-for="(group, groupName) in groups" :key="groupName">
      <h3>{{ groupName }}</h3>
      <ul>
        <li v-for="item in group" :key="">{{  }}</li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const groups = ref({
  Group1: [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
  ],
  Group2: [
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' },
  ],
});
</script>

In this example,v-for="(group, groupName) in groups"Traversal objectsgroupsand the items in each group pass anotherv-forTraversal generation<li>element.

Combining computational properties and methods

You can combine computational properties or methods to process the data, and then usev-forRendering results. For example:

<template>
  <ul>
    <li v-for="item in filteredItems" :key="">{{  }}</li>
  </ul>
</template>
<script setup>
import { ref, computed } from 'vue';
const items = ref([
  { id: 1, name: 'Item 1', category: 'A' },
  { id: 2, name: 'Item 2', category: 'B' },
  { id: 3, name: 'Item 3', category: 'A' },
]);
const categoryFilter = ref('A');
const filteredItems = computed(() => {
  return (item =>  === );
});
</script>

In this example,filteredItemsis a computed property that returns an array item that meets the criteria and then passesv-forRender these items.

Summarize

• Array traversal：v-for="item in items"Used to traverse arrays.
• Object traversal：v-for="(value, key) in object"Key-value pairs used to traverse objects.
• Index access：v-for="(item, index) in items"Allows you to access the index of the current item.
• Nested traversal: You canv-forNested another one inv-for。
• Calculate properties and methods: Combining computational properties or methods to process data and render it after it is rendered.

usev-forIt can help you generate and manage list data dynamically and perform complex DOM operations as needed.

This is the end of this article about the use of v-for in Vue3. For more related content on using v-for, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!