How to use the v-for directive in the Vue documentation

Vue is a popular JavaScript framework for building interactive web applications. Among them, Vue's v-for instruction is one of the important instructions used to loop rendering data. In this article, we will introduce the use of v-for directive in Vue documentation.

The v-for directive can help us repeatedly render and process similar data in the application. Its syntax format is as follows:

v-for="(item, index) in items"

Among them, "items" is the data collection we want to loop and render, which can be an array or object. During the loop, we can use "item" to represent the item currently being processed, and "index" to represent the index value of the current item.

The following is an example of using the v-for directive to render an array:

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子']
    }
  }
}
</script>

In this example, we use the v-for directive to render an unordered list with three list items . During the loop, we use "item" to represent the current item in the array, and "index" to represent the index value of the current item. Also, we use the ":key" directive to provide a unique identifier for each rendered list item.

In addition to arrays, the v-for directive can also be used to render the properties of objects. Here is an example of rendering object properties:

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

<script>
export default {
  data() {
    return {
      object: {
        name: '李雷',
        age: 30,
        location: '中国北京'
      }
    }
  }
}
</script>

In this example, we render the properties of an object. During the loop, we use "value" to represent the value of the current attribute, and "key" to represent the name of the current attribute. Again, we use the ":key" directive to provide a unique identifier for each rendered list item.

In addition to basic loops, the v-for directive also supports the use of computed properties and methods to implement dynamic rendering. Here is an example of using computed properties to render data:

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

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子']
    }
  },
  computed: {
    computedItems() {
      return this.items.map((item) => {
        return item.toUpperCase()
      })
    }
  }
}
</script>

In this example, we use the computed property "computedItems" to return a new array with all the elements in the original array converted to uppercase letters. We then use the v-for directive to render the value of this computed property.

The v-for directive also supports the use of the v-if directive to implement conditional rendering. Here is an example of using the v-if directive to render data:

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子', '草莓', '西瓜']
    }
  }
}
</script>

In this example, we render the odd items of an array. During the loop, we use the v-if instruction to determine whether the index of the current item is an even number. If it is an even number, the value of the current item is rendered, otherwise, the current item is not rendered.

In short, the v-for instruction is one of the important instructions in Vue used to implement loop rendering data. Through the above introduction, I believe you have mastered how to use the v-for instruction in Vue. In actual development, we can choose different loop methods according to specific situations and use them with other instructions and components to build more flexible and efficient web applications.

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