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