007.Vue3入門，進行列表渲染來輸出迴圈的內容

像一棵海草海草海草發表於2024-08-10
Vue

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、效果如下：

相關文章