Vue.js v-for 指令：数组、对象和数字范围的迭代

Vue.js 提供了一个名为 'v-for' 的内置指令，用于迭代数组或对象。它可以与 'v-bind' 指令结合使用，将数据绑定到 HTML 元素。

以下是使用 'v-for' 迭代项目数组的方法：

<ul>
  <li v-for='item in items'>{{ item }}</li>
</ul>

在此示例中，'items' 是您要迭代的项目数组。'v-for' 指令为数组中的每个项目创建一个新元素，并将项目的 value 绑定到模板中的 '{{ item }}' 占位符。

您还可以使用 'v-for' 迭代对象的属性：

<div v-for='(value, key) in object'>
  {{ key }}: {{ value }}
</div>

在此示例中，'object' 是一个具有要迭代的属性的对象。'v-for' 指令为对象中的每个属性创建一个新元素，并将属性的 value 绑定到模板中的 '{{ value }}' 占位符。'key' 变量用于显示属性名称。

您还可以使用 'v-for' 迭代数字范围：

<div v-for='n in 10'>{{ n }}</div>

在此示例中，'v-for' 指令为从 1 到 10 的每个数字创建一个新元素，并将数字的 value 绑定到模板中的 '{{ n }}' 占位符。