Implementation method of folding box/accordion component in Vue document

Vue, as a popular JavaScript framework, provides many components and functions that facilitate development. One common UI component is the accordion (also called an accordion), which allows users to expand and collapse content to save space. In the Vue documentation, we can find a simple but fully functional folding box component. Let's introduce its implementation method.

First, in the Vue component, we need to define some data to control the expanded state of the folding box. This data can be a Boolean value, such as isCollapsed. If isCollapsed is true, the folding box is collapsed; if it is false, the folding box is expanded.

Next, we need to use the v-if or v-show directive in the Vue template to control the display and hiding of the folding box based on the isCollapsed state. The v-if directive can completely remove DOM elements, while the v-show directive only controls the display and hiding of elements through the CSS display attribute. Since the content needs to be displayed when the collapse box is expanded, we place the content inside the directive.

The following is a simple collapsible box template example:

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">{{ isCollapsed ? '展开' : '收起' }}</button>

    <div v-show="!isCollapsed">
      这里是折叠框的内容。
    </div>
  </div>
</template>

In this template, we use a button to toggle the value of isCollapsed and display the corresponding text on the button. The content of the collapse box is controlled using the v-show command and is displayed when isCollapsed is false.

Next, we can add some styles to the folding box component to achieve better interface effects. A basic style can be:

<style>
  .collapse {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
  }
</style>

Apply this style to the collapse box component:

<template>
  <div class="collapse">
    <button @click="isCollapsed = !isCollapsed">{{ isCollapsed ? '展开' : '收起' }}</button>

    <div v-show="!isCollapsed">
      这里是折叠框的内容。
    </div>
  </div>
</template>

This collapse box component only applies to a single collapse box. If we need to implement multiple folding boxes, we can use Vue's loop instruction v-for to dynamically generate multiple components. We can use an array to store the state data, title and content corresponding to each folding box, and use v-for to generate multiple components. Here is an example:

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <div class="collapse">
        <button @click="item.isCollapsed = !item.isCollapsed">{{ item.isCollapsed ? item.title + ' - 展开' : item.title + ' - 收起' }}</button>

        <div v-show="!item.isCollapsed">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {isCollapsed: true, title: '折叠框标题1', content: '折叠框内容1'},
        {isCollapsed: true, title: '折叠框标题2', content: '折叠框内容2'},
        {isCollapsed: true, title: '折叠框标题3', content: '折叠框内容3'},
      ]
    }
  }
}
</script>

In this example, we use the array items to store the status data, title and content of three folding boxes. Then the v-for directive was used to generate three components. The expanded state, title, and content of each component come from the corresponding items array items.

In summary, the implementation method of the folding box component in the Vue document is very simple. We only need to define a Boolean value to control the expansion state, and use the v-if or v-show instructions to display and hide. If you need to implement multiple folding boxes, we can use the v-for directive to dynamically generate multiple components. By studying and practicing the source code of this component, we can quickly master the basic usage of Vue and use it to build more complex UI components and applications.

The above is the detailed content of Implementation method of folding box/accordion component in Vue document. For more information, please follow other related articles on the PHP Chinese website!