用vue写一个折叠列表

以下是一个基本的折叠列表的 Vue 组件示例：

<template>
  <div class="accordion">
    <div v-for="(item, index) in items" :key="index" class="accordion-item">
      <div class="accordion-header" @click="toggle(index)">
        <span>{{ item.title }}</span>
        <i :class="['fas', {'fa-chevron-down': item.active, 'fa-chevron-right': !item.active}]"></i>
      </div>
      <div v-show="item.active" class="accordion-content">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          title: 'Item 1',
          content: 'This is the content for item 1',
          active: false
        },
        {
          title: 'Item 2',
          content: 'This is the content for item 2',
          active: true
        },
        {
          title: 'Item 3',
          content: 'This is the content for item 3',
          active: false
        }
      ]
    }
  },
  methods: {
    toggle(index) {
      this.items[index].active = !this.items[index].active
    }
  }
}
</script>

<style>
.accordion {
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}
.accordion-item {
  border-bottom: 1px solid #ccc;
}
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}
.accordion-content {
  padding: 10px;
}
</style>

该组件利用了 v-for 指令遍历 items 数组，并渲染了每个折叠项的标题和内容区域。通过使用 v-show 指令根据 active 属性的值来控制折叠内容的显示和隐藏。同时，使用了一个 toggle 方法来切换每个折叠项的状态。