How to use v-for instruction to loop output data in Vue

Vue is a popular front-end framework that provides many powerful directives to easily manage views and data. One of the most commonly used instructions is v-for, which can loop through data and output it. In this article, we will learn how to loop through data using the v-for directive in Vue.

First, let’s take a look at the usage of v-for. The basic syntax is as follows:

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

In the above code, we use the v-for instruction to loop through the data in the list array and output it as li elements. The v-for instruction consists of three parts: v-for="(item, index) in list". Among them, (item, index) is the defined item and index, which can be changed according to needs. list is the data array being looped.

key The attribute is required and needs to be unique. It is used by Vue to identify DOM elements in order to render the component faster. Vue will warn if the key attribute is not set, so be sure to set the key attribute.

Next, let’s look at some specific examples to show how to use the v-for instruction to loop out data in Vue.

1. Traverse the array and output a list

In this example, we will use the v-for instruction to loop through an array and output it as a list. In this example, we use the spread operator in ES6 to spread the array.

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

<script>
export default {
  data() {
    return {
      list: ['foo', 'bar', 'baz']
    }
  }
}
</script>

In the above example, we created an array and passed it to the data property of the Vue instance. Next, we use the v-for directive to loop through each item in the array and render it as a list.

2. Traverse the object and output a list

In this example, we will use the v-for instruction to loop through an object and output it as a list. We used the key and value in the object to display the list items and set the key property to the name of the key.

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

<script>
export default {
  data() {
    return {
      obj: {
        foo: 'Foo',
        bar: 'Bar',
        baz: 'Baz'
      }
    }
  }
}
</script>

In the above example, we created an object and passed it to the data property of the Vue instance. We then use the v-for directive to loop through each key-value pair in the object and render them as a list.

3. Loop through numbers and output a list

In this example, we will use the v-for instruction to loop through a number and output it as a list. In v-for we loop the numbers into an array and then count using the index of the item in the array.

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

In the above example, we use the v-for instruction to loop the numbers into an array of length 5 and output it as a list. We use the index variable to count and add it to 1 to get the sequence number.

4. Traverse the array and output the table

In this example, we will use the v-for instruction to loop through an array and output it as an HTML table. We used computed properties to split the nested array into individual data items.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in flattenedList" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'Alice', age: 22, gender: 'Female' },
        { name: 'Bob', age: 25, gender: 'Male' },
        { name: 'Charlie', age: 30, gender: 'Male' },
        { name: 'Diana', age: 27, gender: 'Female' }
      ]
    }
  },
  computed: {
    flattenedList() {
      return this.list.flatMap(item => [item.name, item.age, item.gender])
    }
  }
}
</script>

In the above example, we created an array of four objects and passed it to the data property of the Vue instance. We then split it in a computed property, converting the nested data items into a single data item. Next, we use the v-for directive to loop through the new array and render it as an HTML table.

Summary

In Vue, it is very simple to use the v-for instruction to loop out data. You just need to follow the basic syntax, and armed with the right data, you can start building complex templates. Whether you're iterating over simple arrays or more complex nested data structures, the v-for directive can help you handle them.

The above is the detailed content of How to use v-for instruction to loop output data in Vue. For more information, please follow other related articles on the PHP Chinese website!