Vue.js数组动态渲染：如何按指定格式展示人员数据？

嘿，这事儿其实用Vue的v-for指令就能轻松搞定！因为你的数据是嵌套结构（数组里的每个对象又包含一个数组），所以咱们需要两层v-for来分别渲染外层的人员列表和内层的属性列表。

直接上代码示例吧，一看就懂：

模板部分 #

<ul>
  <!-- 外层循环：遍历people数组，每个项是person -->
  <li v-for="person in people" :key="person.name">
    {{ person.name }} :
    <!-- 内层循环：遍历当前person的properties数组 -->
    <p v-for="prop in person.properties" :key="prop">
      - {{ prop }}
    </p>
  </li>
</ul>

完整组件示例 #

<template>
  <div>
    <ul>
      <li v-for="person in people" :key="person.name">
        {{ person.name }} :
        <p v-for="prop in person.properties" :key="prop">
          - {{ prop }}
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: [
        {"name": "Emily","properties": ["nice","good"]},
        {"name": "John","properties": ["bad","not good"]}
      ]
    }
  }
}
</script>

关键说明： #

• 外层v-for：遍历people数组，把每个对象赋值给person，用person.name作为key（保证每个列表项的唯一性），然后渲染人员名称。
• 内层v-for：针对每个person，遍历它的properties数组，把每个属性赋值给prop，同样用prop作为key，然后渲染带破折号的属性文本。

这样渲染出来的结构就完全符合你想要的格式啦！运行之后，页面会生成你指定的<ul>、<li>和<p>嵌套结构。

内容的提问来源于stack exchange，提问作者calledmaxi