Vue 中 v-for 指令的用法？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 Vue 中，v-for 指令用于基于源数据多次渲染元素或模板块。它可以遍历数组、对象或一个整数范围，并为每个项生成对应的 DOM 元素。

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }}: {{ item.text }}
  </li>
</ul>

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

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

v-for 是 Vue 中用于循环渲染列表的指令。它可以遍历数组、对象或一个整数范围，并为每个项生成对应的 DOM 元素。v-for 指令通常与 :key 属性一起使用，以确保 Vue 能够高效地更新和复用 DOM 元素。

遍历数组：v-for="(item, index) in items"，其中 item 是数组中的每个元素，index 是当前元素的索引。
遍历对象：v-for="(value, key, index) in object"，其中 value 是对象属性的值，key 是对象属性的键，index 是当前属性的索引。
遍历整数范围：v-for="n in 10"，其中 n 是从 1 到 10 的整数。

在使用 v-for 时，通常需要为每个生成的元素指定一个唯一的 :key 属性。这个属性帮助 Vue 识别每个节点，从而在数据变化时能够高效地更新 DOM。如果没有 :key，Vue 可能会错误地复用 DOM 元素，导致不必要的渲染问题。