Vue를 사용하여 축소된 목록을 구현하는 방법은 무엇입니까?

{
  title: 'Item 1',
  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},

<div id="app">
  <h2>折叠列表</h2>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <button @click="toggle(index)">展开/收起</button>
      <h3>{{ item.title }}</h3>
      <div v-show="item.showContent" class="contentDiv">{{ item.content }}</div>
    </li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    items: [
      {
        title: 'Item 1',
        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        showContent: false
      },
      {
        title: 'Item 2',
        content: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        showContent: false
      },
      {
        title: 'Item 3',
        content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
        showContent: false
      }
    ]
  },
  methods: {
    toggle: function(index) {
      this.items[index].showContent = !this.items[index].showContent;
    }
  }
})

ul {
  list-style: none;
  padding: 0;
}

li {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 10px;
}

button {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #333;
  cursor: pointer;
  outline: none;
  padding: 5px 10px;
}

.contentDiv {
  margin-top: 10px;
}