直接上代码
<template>
<div style="padding:80px">
<!-- 用 in 循环渲染数组 -->
<!-- <div v-for="(item, i) in list" :key="i">{{`${item.name} -- ${item.sex} -- ${item.age} `}}</div> -->
<!-- 用 of 循环渲染对象 -->
<div v-for="(items, j) in list" :key="j">
<ul>
<!-- 注意key的唯一性 -->
<li v-for="(value, k) of items" :key="k+j">{{value}}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data () {
return {
list: [{
name: "赵云",
sex: "男",
age: 27,
},{
name: "大乔",
sex: "女",
age: 18,
},
{
name: "黄忠",
sex: "男",
age: 32,
},{
name: "孙尚香",
sex: "女",
age: 19
}]
}
}
}
</script>
需要注意key的唯一性