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

In Vue, v-for is an instruction that can be used in templates to perform loop operations on arrays or objects. The v-for directive is used to loop rendering data and is one of the very useful instructions in Vue. In Vue, the way of using the v-for instruction to loop out an object is similar to the way to loop out an array, with only a slight difference.

How to use v-for instruction to loop output objects? Below we will explain it in the following parts.

1. Basic use of v-for instruction

The basic syntax of v-for instruction is as follows:

<div v-for="(item,index) in items">{{ index }} - {{ item }}</div>

Among them, items represents the array or object to be looped; item represents the element being iterated; index represents the index of the element in the array or object.

Taking an array as an example, we can loop out the elements in the array like this:

<div v-for="(item,index) in items">{{ index }} - {{ item }}</div>

2. Loop the attributes in the output object

In Vue, we can use v The -for command loops to output the attributes in the object. The method is as follows:

<div v-for="(value,key,index) in object">{{ index }} - {{ key }}: {{ value }}</div>

Among them, object represents the object to be output in a loop; value represents the attribute value being iterated; key represents the attribute name being iterated; index represents the element Index within the object.

Let’s look at a specific example:

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

<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 20,
        sex: '男'
      }
    }
  }
}
</script>

The above code will loop through the attributes in the user object, and output the index, attribute name, and attribute value in the object where the attribute is located. The final output result is as follows:

0 - name: 张三
1 - age: 20
2 - sex: 男

3. Use the v-for instruction to iteratively calculate attributes

In Vue, we can also use the v-for instruction to iteratively calculate attributes, which is useful for some special Application scenarios are very useful.

For example, we can use computed properties to get all the properties that meet the conditions in an object. The specific code is as follows:

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

<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 20,
        sex: '男'
      }
    }
  },
  computed: {
    filteredUser() {
      return Object.keys(this.user).reduce((result, key) => {
        if (key !== 'sex') {
          result[key] = this.user[key];
        }
        return result;
      }, {});
    }
  }
}
</script>

The above code will use calculated properties to obtain all properties in the user object except the sex property, and finally output these properties in a loop. The final output result is as follows:

0 - name: 张三
1 - age: 20

To summarize, you need to pay attention to the following points when using the v-for instruction to loop output objects:

1. The basic syntax of the v-for instruction and the loop output array In a similar way.
2. Looping the properties in the output object requires using the specific syntax of the v-for directive.
3. We can also use calculated properties to obtain elements that meet the conditions in the object, and then use the v-for instruction for iterative output.

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