v-for

v-for 是 Vue.js 中的一个指令，用于在模板中渲染一个列表。它允许你基于一个数组或对象生成一系列的 DOM 元素。v-for 是 Vue.js 的一个核心功能，用于动态生成内容。

基本用法

v-for 的基本语法是：

<!-- 在数组中循环 -->
<li v-for="item in items" :key="item.id">
  {{ item.text }}
</li>

<!-- 在对象中循环 -->
<div v-for="(value, key) in object" :key="key">
  {{ key }}: {{ value }}
</div>

详细解释

1. 数组循环：

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

   这里，v-for="item in items" 表示循环 items 数组中的每个元素，并将当前元素绑定到 item。item.id 是每个元素的唯一标识符，用于帮助 Vue.js 识别每个 DOM 元素的唯一性，从而提高性能。item.text 是显示在列表中的内容。

2. 对象循环：

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

   这里，v-for="(value, key) in object" 表示循环 object 对象的每个属性，key 是属性名，value 是属性值。key 用作唯一标识符。

:key 属性

v-for 指令通常需要一个 :key 属性，这个属性用于帮助 Vue.js 跟踪每个节点的身份，从而更高效地进行 DOM 更新。如果你没有提供 :key，Vue.js 会使用默认的追踪机制，这可能会影响性能和更新准确性。

循环的其他用法

• 循环范围：

  <ul>
    <li v-for="n in 10" :key="n">
      {{ n }}
    </li>
  </ul>
  

  这里，v-for="n in 10" 表示循环从 1 到 10 的整数。n 是当前的值。

• 使用索引：

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

  这里，index 是当前循环项的索引值。

v-for 是一个非常强大的工具，可以在 Vue.js 中处理和展示动态数据。如果你对 Vue.js 有更深入的兴趣，可以尝试各种复杂的场景来熟悉 v-for 的更多用法。