在vue用v-for写手风琴效果

在Vue中使用v-for来实现手风琴效果，可以通过动态绑定CSS类来实现。下面是一个简单的示例代码：

<template>
  <div>
    <div class="accordion-item" v-for="(item, index) in accordionItems" :key="index">
      <div class="accordion-header" @click="toggleItem(index)">
        {{ item.title }}
      </div>
      <div class="accordion-content" :class="{ 'active': activeIndex === index }">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      accordionItems: [
        { title: '标题1', content: '内容1' },
        { title: '标题2', content: '内容2' },
        { title: '标题3', content: '内容3' },
      ],
      activeIndex: null,
    };
  },
  methods: {
    toggleItem(index) {
      if (this.activeIndex === index) {
        // 如果点击的是已经展开的项，则折叠它
        this.activeIndex = null;
      } else {
        // 否则展开点击的项
        this.activeIndex = index;
      }
    },
  },
};
</script>

<style>
.accordion-item {
  margin-bottom: 10px;
}

.accordion-header {
  cursor: pointer;
  background-color: #ccc;
  padding: 10px;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-content.active {
  max-height: 200px; /* 调整合适的高度 */
}
</style>

上述代码中，通过v-for循环遍历accordionItems数组，生成对应的手风琴项。点击标题时，调用toggleItem方法来切换展开/折叠状态。通过动态绑定CSS类来控制内容的显示与隐藏。activeIndex用于记录当前展开的项的索引，若与当前点击的项索引一致，则折叠该项，否则展开该项。accordion-content的max-height属性用于实现动画效果，使内容的高度从0逐渐展开。你可以根据需要自定义样式和内容。