在 Vue.js 中，循环语句常通过 v-for 指令来实现。v-for 可以用来遍历数组、对象或其他集合类型，并为每个元素渲染一个模板。下面是一些常见的 Vue.js 循环语句使用方法。

1. 遍历数组

最常见的使用场景是遍历数组，并为每个数组元素渲染相应的 HTML。

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

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

在这个例子中，v-for="(item, index) in items" 会遍历 items 数组，并将每个元素绑定到 item，其索引绑定到 index。

  • item 是当前元素的值。
  • index 是当前元素的索引（可选）。
  • :key="index" 用于提供一个唯一的标识符（一般使用索引或元素的唯一 ID），以帮助 Vue 跟踪每个 DOM 元素，提升性能。

2. 遍历对象

除了数组，v-for 也可以用于遍历对象。在遍历对象时，v-for 会将对象的键（key）和值（value）一起返回。

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

<script>
export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 30,
        location: 'New York'
      }
    };
  }
};
</script>

在这个例子中，v-for="(value, key) in user" 会遍历 user 对象，并显示每个键值对。

  • key 是对象的键。
  • value 是对象的值。

3. 遍历数组的数组（嵌套循环）

如果你的数组中包含其他数组或对象，你可以在一个 v-for 中嵌套另一个 v-for。

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

<script>
export default {
  data() {
    return {
      categories: [
        { name: 'Fruits', items: ['Apple', 'Banana', 'Orange'] },
        { name: 'Vegetables', items: ['Carrot', 'Potato', 'Lettuce'] }
      ]
    };
  }
};
</script>

在这个例子中，categories 数组中的每个元素又是一个包含 items 数组的对象，所以我们需要使用两个 v-for 指令来嵌套遍历。

4. 遍历数字范围

v-for 还可以用来遍历数字范围。在这种情况下，你需要使用 v-for="n in 5" 来遍历一个从 1 到 5 的数字范围。

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

<script>
export default {
  data() {
    return {};
  }
};
</script>

这会渲染 5 个列表项，显示 Item 1 到 Item 5。

5. 使用 v-for 遍历组件

你还可以使用 v-for 来渲染多个组件。每个组件的渲染会基于数据数组的每个元素。

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

在上面的代码中，v-for 被用来遍历 items 数组，并为每个数组元素渲染一个 ChildComponent 组件。

6. 遍历带条件的数组

你可以使用计算属性或者方法过滤出符合特定条件的数组元素，然后在模板中使用 v-for 来渲染这些元素。

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

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange', 'Pineapple', 'Grapes']
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.startsWith('P')); // 只显示以 P 开头的项
    }
  }
};
</script>

在这个例子中，filteredItems 是一个计算属性，它返回了所有以 “P” 开头的水果。

7. 遍历数组的索引

你还可以通过 v-for 获取数组的索引。这对于在模板中显示或操作元素位置非常有用。

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

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

在这个例子中，index 表示当前元素的索引，可以用来显示元素的位置（如：1. Apple）。

8. 使用 v-for 遍历组件的属性

你可以在 v-for 中遍历对象的属性，并将其作为组件的属性传递给子组件。

<template>
  <div>
    <child-component v-for="(value, key) in user" :key="key" :data="value"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      user: {
        name: 'John',
        age: 30,
        location: 'New York'
      }
    };
  }
};
</script>

在上面的例子中，user 对象被遍历，key 和 value 被作为 ChildComponent 的属性传递给子组件。

总结

  • v-for 是 Vue.js 中非常强大的指令，用于遍历数组、对象、数字范围等数据类型。
  • 在使用 v-for 时，记得为每个渲染的元素指定一个 key，以提高性能并减少 DOM 操作。
  • 可以通过嵌套 v-for 来遍历嵌套的数据结构，如数组的数组或对象。
  • 通过 v-for 还可以渲染多个组件或者动态渲染组件内容。

这种声明式的循环方式使得开发更加简洁和直观。