Vue.js 实现嵌套数组数据竖向显示的方法

在Vue.js开发中，经常会遇到需要处理嵌套数组数据并将其竖向显示的需求。这种情况在展示具有层次结构的数据，如树形菜单、组织结构图等时尤为常见。下面将介绍一种有效的实现方法。

在Vue组件的data选项中定义嵌套数组数据。例如：

data() {
  return {
    nestedData: [
      {
        name: '一级节点1',
        children: [
          { name: '二级节点1-1' },
          { name: '二级节点1-2' }
        ]
      },
      {
        name: '一级节点2',
        children: [
          { name: '二级节点2-1' },
          { name: '二级节点2-2' }
        ]
      }
    ]
  };
}

接下来，在模板中使用v-for指令来遍历嵌套数组。对于外层数组，使用一个v-for循环来渲染一级节点：

<ul>
  <li v-for="item in nestedData" :key="item.name">
    {{ item.name }}
    <ul>
      <li v-for="child in item.children" :key="child.name">
        {{ child.name }}
      </li>
    </ul>
  </li>
</ul>

在上述代码中，外层的v-for循环遍历nestedData数组，渲染每个一级节点。对于每个一级节点，内部又使用一个v-for循环遍历其children数组，渲染对应的二级节点。

如果嵌套层次更深，可以继续嵌套v-for循环来处理更下层的数据。

为了提高性能，确保为每个v-for循环的元素提供唯一的key属性。这有助于Vue.js更高效地更新DOM。

如果需要对显示的样式进行进一步定制，可以使用CSS来调整列表项的布局、间距等。例如：

ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin-bottom: 10px;
}

通过上述方法，就可以在Vue.js中实现嵌套数组数据的竖向显示。根据实际需求，还可以添加交互功能，如点击展开或折叠子节点等，以提供更丰富的用户体验。