【Vue】深入了解 v-for 指令：从基础到高级应用的全面指南

<template>
  <div>
    <!-- 基础用法 -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
 
    <!-- 使用 index 作为 key -->
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item.text }} at index {{ index }}</li>
    </ul>
 
    <!-- 使用对象键值对 -->
    <ul>
      <li v-for="(value, name) in object" :key="name">{{ name }}: {{ value }}</li>
    </ul>
 
    <!-- 使用 v-for 嵌套 -->
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.text }}
        <ul>
          <li v-for="subItem in item.subItems" :key="subItem.id">{{ subItem.text }}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1', subItems: [{ id: 11, text: 'Sub Item 1.1' }] },
        { id: 2, text: 'Item 2', subItems: [{ id: 21, text: 'Sub Item 2.1' }] }
      ],
      object: {
        firstName: 'John',
        lastName: 'Doe',
        age: 30
      }
    };
  }
};
</script>

这个代码示例展示了如何在Vue中使用v-for指令来遍历数组、对象和嵌套结构，并且每个元素都绑定了一个唯一的key，以助于Vue跟踪每个节点的身份，从而进行高效的DOM更新。