vue for实现

for 循环在 Vue 中的实现方式

在 Vue 中，可以通过多种方式实现循环逻辑，包括模板中的 v-for 指令、JavaScript 原生的 for 循环，以及结合计算属性或方法使用循环。

使用 v-for 指令

v-for 是 Vue 提供的模板指令，用于在模板中循环渲染元素。它可以遍历数组或对象。

<template>
  <div>
    <!-- 遍历数组 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>

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

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange'],
      object: {
        name: 'John',
        age: 30
      }
    };
  }
};
</script>

在 JavaScript 中使用 for 循环

可以在 Vue 的方法或计算属性中使用 JavaScript 原生的 for 循环处理数据。

export default {
  data() {
    return {
      numbers: [1, 2, 3, 4, 5]
    };
  },
  computed: {
    doubledNumbers() {
      const result = [];
      for (let i = 0; i < this.numbers.length; i++) {
        result.push(this.numbers[i] * 2);
      }
      return result;
    }
  }
};

使用 v-for 结合条件渲染

可以在 v-for 中结合 v-if 实现条件循环。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple', isActive: true },
        { id: 2, name: 'Banana', isActive: false },
        { id: 3, name: 'Orange', isActive: true }
      ]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.isActive);
    }
  }
};
</script>

遍历数字范围

v-for 也可以直接遍历一个数字范围。

<template>
  <div>
    <span v-for="n in 5" :key="n">{{ n }}</span>
  </div>
</template>

使用 v-for 的 key 属性

为提升渲染性能，建议为 v-for 的每一项提供唯一的 key 属性。

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' }
      ]
    };
  }
};
</script>

通过以上方式，可以灵活地在 Vue 中实现循环逻辑，满足不同的需求场景。