vue for循环出来的数据变成折叠面板

可以使用 Vue 的 v-for 指令循环渲染数据，并结合折叠面板组件来实现需求。以下是一个基本的示例代码：

<template>
  <div>
    <el-collapse v-model="activeNames" accordion>
      <el-collapse-item v-for="(item, index) in data" :key="index" :title="item.title" :name="item.name">
        <p>{{ item.content }}</p>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: [], // 控制展开的面板
      data: [
        { title: '面板1', name: 'panel1', content: '面板1的内容' },
        { title: '面板2', name: 'panel2', content: '面板2的内容' },
        { title: '面板3', name: 'panel3', content: '面板3的内容' },
        // 更多数据...
      ]
    };
  }
};
</script>

在上面的示例中，使用了 Element UI 的 Collapse 折叠面板组件（el-collapse）来实现折叠效果。v-for 指令用于循环渲染数据，并将数据绑定到折叠面板组件的相关属性上。

需要注意的是，使用 v-model 绑定的 activeNames 数组用来控制展开的面板，可以根据需要设置默认展开的面板或者根据用户的操作进行动态控制。

以上代码仅为示例，具体根据你的实际需求进行适当修改。希望对你有帮助！