007.Vue3入门，进行列表渲染来输出循环的内容

1、代码如下：

<template>
  <h3>列表渲染</h3>
  <p v-for="(item,index) of names">序号：{{ index }}，内容：{{ item }} </p>
  <div v-for="item of result">
    <p>ID:{{ item.id }}, PKID:{{ item.pkid }}</p>
  </div>
  <div>
    <p v-for="(value,key,index) of userInfo">
      序号：[{{ index }}]，键:[{{ key }}]，值:[{{ value }}]
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      names: ["name1", "name2", "name3"],
      result: [
        {
          "id": 101,
          "pkid": "pkid001",
        }, {
          "id": 102,
          "pkid": "pkid002",
        },
      ],
      userInfo: {
        name: "aa",
        age: 20,
        sex: "男"
      }
    }
  }
}
</script>

2、效果如下：