vue 中使用 v-for 循环遍历对象并展示在模版中

在Vue中，你可以使用v-for指令来循环遍历对象属性，并将其显示在模板中。以下是一个简单的例子：

<template>
  <div>
    <!-- 循环遍历对象中的属性 -->
    <div v-for="(value, key, index) in myObject" :key="key">
      {{ index }}. {{ key }}: {{ value }}
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      // 定义一个对象
      myObject: {
        firstName: 'John',
        lastName: 'Doe',
        age: 30
      }
    };
  }
};
</script>

在这个例子中，v-for="(value, key, index) in myObject"创建了一个循环，遍历myObject中的每一个属性。value是属性的值，key是属性的键，而index是索引。:key="key"确保了每个节点的key是唯一的，这对于Vue的渲染系统来说是必须的。