vue v-for 跳出循环

在 Vue 的 v-for 指令中，可以使用 v-if 指令来控制循环的结束。例如，可以使用一个计算属性来判断循环是否应该继续，如果不需要继续，则使用 v-if 指令来跳出循环。

以下是一个示例代码：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <div>{{ item }}</div>
      <div v-if="shouldContinue(index)">Continue looping</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5],
      limit: 3,
    };
  },
  methods: {
    shouldContinue(index) {
      return index < this.limit;
    },
  },
};
</script>

在以上示例中，使用了一个计算属性 shouldContinue 来判断循环是否应该继续。如果 index 小于 limit，则返回 true，否则返回 false。然后在循环中使用 v-if 指令来判断是否应该继续循环。如果应该继续，则会显示 "Continue looping"，否则不会显示。这样就实现了跳出循环的效果。