当前位置：首页 > VUE

vue实现each遍历

2026-02-18 17:57:09VUE

vue实现each遍历的方法

在Vue中实现类似each的遍历功能，主要通过v-for指令完成。以下是几种常见的实现方式：

vue实现each遍历

遍历数组

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

data() {
  return {
    items: ['Apple', 'Banana', 'Orange']
  }
}

遍历对象

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

data() {
  return {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
}

使用计算属性过滤

<ul>
  <li v-for="item in filteredItems" :key="item.id">
    {{ item.name }}
  </li>
</ul>

computed: {
  filteredItems() {
    return this.items.filter(item => item.active)
  }
}

遍历数字范围

<ul>
  <li v-for="n in 10" :key="n">
    {{ n }}
  </li>
</ul>

使用v-for与组件

<my-component
  v-for="(item, index) in items"
  :key="item.id"
  :item="item"
  @remove="removeItem(index)"
></my-component>

注意事项

始终为v-for提供唯一的:key属性，这有助于Vue高效更新DOM
避免在同一元素上同时使用v-for和v-if，应改为在计算属性中过滤数据
对于大型列表，考虑使用虚拟滚动技术优化性能
在组件中使用v-for时，确保正确传递props和事件处理

标签: 遍历 vue

分享给朋友：

vue实现签约合作弹窗

实现签约合作弹窗的步骤使用Vue实现签约合作弹窗可以通过组件化方式完成，结合模态框和表单交互逻辑。以下是具体实现方法： 1. 创建弹窗组件新建一个Vue组件文件（如SignContractDia…

vue实现骰子

Vue 实现骰子功能创建 Vue 组件在 Vue 项目中创建一个骰子组件，例如 Dice.vue。该组件包含骰子的外观和逻辑。 <template> <div class=…

vue 实现单选

使用 v-model 绑定单选值在 Vue 中，可以通过 v-model 绑定单选按钮的值。定义一个响应式数据（如 selectedOption），并将其与单选按钮的 value 属性关联。…

vue实现浮标

Vue 实现浮动按钮（浮标）使用 Vue 实现浮动按钮可以通过多种方式完成，以下是几种常见的方法：使用 CSS 定位和 Vue 组件创建 Vue 组件并配合 CSS 固定定位实现浮动按钮：…

vue 实现分屏

Vue 实现分屏的方法使用 CSS Flexbox 或 Grid 布局通过 CSS Flexbox 或 Grid 布局可以轻松实现分屏效果。在 Vue 组件中定义两个或多个区域，并使用 CSS 控…

vue 简单实现

以下是 Vue 的简单实现示例，涵盖基础模板、数据绑定、方法及生命周期：基础模板与数据绑定 <div id="app"> <p>{{ message }}</…

vue实现each遍历