vue中同时使用两个v-for循环

在 Vue 中，可以使用 `v-for` 指令来循环渲染数组或对象。如果要同时循环渲染两个数组或对象，可以使用嵌套的 `v-for` 指令。

例如，如果有两个数组 `users` 和 `roles`，可以使用以下代码来同时循环渲染它们：

<ul>
  <li v-for="user in users" :key="user.id">
    {{ user.name }}
    <ul>
      <li v-for="role in roles" :key="role.id">
        {{ role.name }}
      </li>
    </ul>
  </li>
</ul>

在这个例子中，外层的 `v-for` 循环遍历 `users` 数组，内层的 `v-for` 循环遍历 `roles` 数组。使用 `:key` 绑定每个循环项的唯一标识符，以便 Vue 可以正确地跟踪每个项的状态。

注意，嵌套的 `v-for` 循环会导致嵌套的渲染，因此在渲染大量数据时可能会影响性能。如果可能的话，最好尝试合并数据，或者使用其他优化技术来减少嵌套循环的数量。