Vue.js v-for 循环渲染 2 到 10 的数字 - 示例教程

Vue 的 v-for 指令可以用来循环渲染数组或对象的数据。要循环渲染 2 到 10 之间的数字，可以使用 Vue 的计算属性来生成一个包含这些数字的数组，然后在模板中使用 v-for 指令进行循环渲染。

以下是一个示例代码：

<template>
  <div>
    <div v-for='number in numbers' :key='number'>{{ number }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: []
    }
  },
  computed: {
    numbers() {
      // 生成包含 2 到 10 之间的数字的数组
      return Array.from({ length: 9 }, (_, i) => i + 2);
    }
  }
}
</script>

在这个示例中，通过计算属性 numbers 生成了一个包含 2 到 10 之间的数字的数组。然后在模板中使用 v-for 指令循环渲染这个数组的每个元素，并使用 :key 绑定每个元素的唯一标识。

通过上述代码，模板中会渲染出以下的 HTML 结构：

<div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

这样就实现了循环渲染 2 到 10 之间的数字。