以下答案引用自GPT-3大模型,请合理使用:
```javascript
const list = [
{
id:"1",
name:"小明",
img:"/img/1.jpg"
},
{
id:"2",
name:"小红",
img:"/img/2.jpg"
},
{
id:"3",
name:"小黑",
img:"/img/3.jpg"
}
]
Vue3中可以通过<template>
来实现循环数组对象,代码如下:
<template>
<ul>
<li v-for="item in list" :key="item.id">
<div>头像:{{ item.img }}</div>
<div>昵称:{{ item.name }}</div>
<div>ID:{{ item.id }}</div>
</li>
</ul>
</template>
<script>
export default {
name: 'Demo',
data () {
return {
list: [
{
id:"1",
name:"小明",
img:"/img/1.jpg"
},
{
id:"2",
name:"小红",
img:"/img/2.jpg"
},
{
id:"3",
name:"小黑",
img:"/img/3.jpg"
}
]
}
}
}
</script>
最终渲染效果如下:
<ul>
<li>
<div>头像:/img/1.jpg</div>
<div>昵称:小明</div>
<div>ID:1</div>
</li>
<li>
<div>头像:/img/2.jpg</div>
<div>昵称:小红</div>
<div>ID:2</div>
</li>
<li>
<div>头像:/img/3.jpg</div>
<div>昵称:小黑</div>
<div>ID:3</div>
</li>
</ul>
```
如果我的回答解决了您的问题,请采纳我的回答
如果展示的话,v-for 就行 然后要啥 属性就 item.属性名 。如果 属性是数组 还得 v-for嵌套 v-for