Vue.js 展开一条时关闭其他：使用 v-if 和 expandClick 方法

To achieve the desired functionality in Vue.js, you can use the 'v-if' directive to conditionally render the expanded content based on a flag. Here's an example of how you can implement this:

In your Vue component template, you would have a list of items with an expand button for each item:

<template>
  <div>
    <div v-for='(item, index) in items' :key='index'>
      <button @click='expandClick(item)'>{{ item.title }}</button>
      <div v-if='item.expanded'>
        <!-- Content to be displayed when item is expanded -->
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

In your Vue component script, you would define the 'items' data property and the 'expandClick' method:

<script>
export default {
  data() {
    return {
      items: [
        { title: 'Item 1', content: 'Content 1', expanded: false },
        { title: 'Item 2', content: 'Content 2', expanded: false },
        { title: 'Item 3', content: 'Content 3', expanded: false },
        // Add more items as needed
      ],
    };
  },
  methods: {
    expandClick(clickedItem) {
      this.items.forEach((item) => {
        // Close all other items
        if (item !== clickedItem) {
          item.expanded = false;
        }
      });
      // Toggle the clicked item's expanded state
      clickedItem.expanded = !clickedItem.expanded;
    },
  },
};
</script>

In this example, each item in the 'items' array has a 'title', 'content', and 'expanded' property. The 'expandClick' method is called when the expand button is clicked. It iterates over all items and closes the ones that are not the clicked item. Then, it toggles the clicked item's 'expanded' state.

Hope this helps!