Vue.js 列表渲染 v-for 与范围

在 Vue.js 中，你可以使用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，并且 item 是数组元素迭代的别名。

基本用法

下面是 v-for 最基本的用法：

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

在上面的例子中，我们为每一个 items 数组中的元素渲染一条 <li> 列表项，并将元素本身打印出来。

遍历对象

v-for 也可以遍历对象的属性。在遍历对象时，可以提供第二个参数作为属性名的别名。

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

维护状态

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue 将不是移动 DOM 元素来匹配数据项的顺序，而是直接复用此处的每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了让 Vue.js 能够跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

<div v-for="item in items" :key="item.uid">{{ item }}</div>

组件中的用法

在自定义组件中使用 v-for 时，可以定义一个 prop 作为循环的数据源，并在子组件中使用这个 prop。

<my-component v-for="item in items" :key="item.id" :item="item"></my-component>

上面的代码会渲染出多个 my-component 组件，每个组件都以 items 数组中的一个元素作为 item prop 的值。

范围

除了遍历数组和对象，v-for 还支持使用整数迭代的特殊语法。例如：

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

上面的代码将渲染出一个包含从 1 到 10 的数字的列表。

如果要同时处理索引和值（如 JavaScript 中的 forEach），可以将 v-for 和 v-for="(value, key) in object" 结合使用：

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

以上就是 Vue.js 中列表渲染 v-for 与范围的介绍，希望对你有所帮助。