当前位置：首页 > VUE

vue实现组件循环

2026-02-09 11:24:40VUE

在 Vue 中实现组件循环

Vue 提供了 v-for 指令，可以轻松实现组件的循环渲染。v-for 可以遍历数组或对象，并为每个项渲染一个组件或元素。

基本语法

<template>
  <div>
    <component-name 
      v-for="(item, index) in items" 
      :key="index"
      :prop-name="item.property"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { property: 'value1' },
        { property: 'value2' },
        { property: 'value3' }
      ]
    }
  }
}
</script>

关键点说明

v-for 指令用于循环渲染组件或元素
:key 是必须的，帮助 Vue 识别每个节点的身份
循环数据可以来自组件的 data 选项，也可以从父组件通过 props 传入

遍历数组示例

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

<script>
export default {
  data() {
    return {
      itemList: [
        { text: '项目一' },
        { text: '项目二' },
        { text: '项目三' }
      ]
    }
  }
}
</script>

遍历对象示例

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

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '张三',
        age: 25,
        occupation: '工程师'
      }
    }
  }
}
</script>

在组件中循环渲染子组件

<template>
  <div>
    <child-component 
      v-for="item in items"
      :key="item.id"
      :title="item.title"
      :content="item.content"
    />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      items: [
        { id: 1, title: '标题1', content: '内容1' },
        { id: 2, title: '标题2', content: '内容2' }
      ]
    }
  }
}
</script>

使用计算属性进行过滤

可以在循环前对数据进行处理：

vue实现组件循环

<template>
  <div>
    <item-card 
      v-for="item in filteredItems"
      :key="item.id"
      :item="item"
    />
  </div>
</template>

<script>
export default {
  computed: {
    filteredItems() {
      return this.items.filter(item => item.active)
    }
  },
  data() {
    return {
      items: [
        { id: 1, active: true },
        { id: 2, active: false },
        { id: 3, active: true }
      ]
    }
  }
}
</script>