How to use v-for to iterate objects and arrays in Vue

Vue.js is a very popular front-end framework. It provides numerous instructions, components and methods to facilitate developers to build efficient and complex web applications. Among them, v-for is one of the most commonly used instructions, which allows us to use loop structures in templates to quickly and easily iterate data in objects and arrays. Below, we will introduce in detail how to use v-for to iterate objects and arrays in Vue.

1. Iterate the array

In the Vue template, we can use the v-for instruction to iterate the data in the array. Its syntax format is as follows:

<div v-for="(item, index) in array" :key="item.id">{{ item.value }}-{{ index }}</div>

Among them, item represents an element in the array, index represents the index of the current element in the array, and array represents the array to be iterated. We can use parentheses to enclose item and index, and use the in keyword to separate them from the array name.

In the above example, we also used the :key attribute to specify a unique identifier for each iterated element to improve performance when Vue re-renders.

If we have an array containing numbers like:

<script>
  export default {
    data() {
      return {
        numbers: [1, 2, 3, 4, 5]
      }
    }
  }
</script>

We can use v-for in the template to iterate over it:

<ol>
  <li v-for="number in numbers" :key="number">{{ number }}</li>
</ol>

This will create an ordered A list where each item is a number in the array.

In addition to using v-for in templates to render arrays, we can also process arrays in Vue's computed properties and then use them in templates. For example, we can create a computed property to filter the even numbers in an array:

<script>
  export default {
    data() {
      return {
        numbers: [1, 2, 3, 4, 5]
      }
    },
    computed: {
      evenNumbers() {
        return this.numbers.filter((number) => number % 2 === 0)
      }
    }
  }
</script>

<ol>
  <li v-for="number in evenNumbers" :key="number">{{ number }}</li>
</ol>

This will create a list that only displays the even numbers in the array.

2. Iterate objects

Similar to arrays, Vue also allows us to use v-for to iterate properties in objects. Its syntax format is as follows:

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

Among them, value represents the value of an attribute in the object, key represents the name of the attribute, and object represents the object to be iterated.

If we have an object containing user information like:

<script>
  export default {
    data() {
      return {
        user: {
          name: 'Alice',
          age: 30,
          email: 'alice@example.com'
        }
      }
    }
  }
</script>

We can use v-for to iterate over it and render the properties within it:

<dl>
  <dt>User info</dt>
  <dd v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</dd>
</dl>

This will create A list of definitions where each phrase displays the name of an attribute and its value.

In addition to using v-for in templates to render objects, we can also process objects in Vue's computed properties and then use them in templates. For example, we can create a computed property to filter out properties where the user is older than 25 years old:

<script>
  export default {
    data() {
      return {
        user: {
          name: 'Alice',
          age: 30,
          email: 'alice@example.com'
        }
      }
    },
    computed: {
      ageOver25() {
        return Object.keys(this.user)
          .filter((key) => key === 'age' ? this.user[key] > 25 : true)
          .reduce((obj, key) => {
            obj[key] = this.user[key]
            return obj
          }, {})
      }
    }
  }
</script>

<dl>
  <dt>User info (age over 25)</dt>
  <dd v-for="(value, key) in ageOver25" :key="key">{{ key }}: {{ value }}</dd>
</dl>

This will create a definition list that only displays properties where the user is older than 25 years old.

Summary

v-for is a very commonly used instruction in Vue. It allows us to use loop structures in templates to quickly and easily iterate data in arrays and objects. In actual development, we will frequently use v-for to dynamically render data structures such as lists and tables. Therefore, it is very important to be proficient in the use of v-for.

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