使用 v-for 带数字

在 Vue 中，我们可以使用 v-for 指令来循环渲染数组、对象和迭代器实现列表的渲染。除此之外，Vue 还提供了一种特殊的 v-for 用法，即带数字循环渲染，用于生成一定长度的数组。

基本用法

带数字的 v-for 语法格式为：

<template v-for="item in length">
  <!-- 循环渲染的内容 -->
</template>

其中，length 是一个数值类型的数据，表示需要循环渲染的次数。

在实际使用时，我们可以通过计算属性或者直接将数字赋值给 data 中的变量来动态生成需要循环的次数。

例如，我们有一个名为 n 的数据，想要循环渲染 n 次，可以这样实现：

<template v-for="item in n">
  <p>这是循环渲染的第 {{ item }} 次。</p>
</template>

响应式更新

与普通的 v-for 一样，带数字的 v-for 也是响应式的。如果 length 发生变化，页面上渲染的内容也会随之更新。

例如，我们将 length 的初始值设为 3，这时页面上会显示 3 次循环渲染的内容。随后，我们将 length 的值改为 5，此时页面上的内容也会随之更新，变为 5 次循环渲染的内容。

<template v-for="item in length">
  <p>这是循环渲染的第 {{ item }} 次。</p>
</template>

<script>
export default {
  data() {
    return {
      length: 3,
    };
  },
  mounted() {
    setTimeout(() => {
      this.length = 5;
    }, 3000);
  },
};
</script>

示例

下面是一个使用带数字 v-for 循环渲染的示例，该示例简单地实现了一个倒计时功能，每秒更新一次，直到倒计时结束。

<template>
  <div>
    <p v-if="countdown > 0">
      {{ countdown }} 秒后结束。
    </p>
    <p v-else>
      倒计时结束。
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      length: 10, // 默认倒计时为 10 秒
    };
  },
  computed: {
    countdown() {
      return this.length > 0 ? Math.ceil(this.length - this.startTime) : 0;
    },
  },
  mounted() {
    this.startTime = Date.now() / 1000;
    setInterval(() => {
      this.length--;
    }, 1000);
  },
};
</script>

总结

带数字的 v-for 用法，在很多场景下都能够帮助我们快速地生成一定长度的数组，比如实现倒计时、分页器等功能。同时，由于它与 Vue 的响应式系统结合得非常紧密，所以也能够在数据发生变化时实现自动更新，具有很高的实用价值。