How to implement a collapsible list using Vue?

Vue is a popular JavaScript library that is widely used in the field of web development. In Vue, we can easily implement various components and interactive effects. Among them, the collapsible list is a more practical component. It can group list data to improve the readability of data display. At the same time, it can be expanded when specific content needs to be expanded, making it convenient for users to view detailed information. This article will introduce how to use Vue to implement a collapsible list.

1. Preparation work

Before using Vue to implement a collapsible list, we need to prepare the following work:

1.1 Vue environment: Install Vue. js, which can be imported through official website download or CDN introduction.

1.2 Data preparation: Prepare the data to be displayed, which can be an array or object. Each item contains the title and content of the displayed data.

2. HTML Structure

Our collapsible list mainly consists of two parts, one is the title part that displays the list, and the other is the part that displays the content of the list. Among them, the title part needs to set the click event to trigger the expansion and collapse of the content part. Therefore, we can use Vue's v-for instruction to loop through the rendering list and bind the click event at the same time, as shown below:

<template>
  <div>
    <ul>
      <li v-for="(item,index) in dataList" :key="index" @click="toggle(index)">
        {{ item.title }}
      </li>
    </ul>
    <div v-for="(item,index) in dataList" :key="index">
      <div v-show="item.show">{{ item.content }}</div>
    </div>
  </div>
</template>

In this code, we use a wrapping element that contains a ul and A set of divs. Among them, multiple li's in the title part are rendered in ul, and the content of each li is item.title. The expanded content corresponding to each li is controlled by the v-show instruction. When item.show is true, the expanded content will be displayed.

3. JavaScript Logic

Next, we need to write some JavaScript logic to implement the function of the collapsible list. The specific steps are as follows:

3.1 Define data Structure

Our data should include two parts, one is the title of the list, and the other is the corresponding content of the list. Therefore, we can define a data structure as follows:

data() {
  return {
    dataList: [
      {
        title: "列表标题1",
        content: "列表1的详细内容",
        show: false,
      },
      {
        title: "列表标题2",
        content: "列表2的详细内容",
        show: false,
      },
      {
        title: "列表标题3",
        content: "列表3的详细内容",
        show: false,
      },
    ],
  };
},

Among them, the show parameter is used to control whether the expanded part is displayed. Initially, we want the expanded parts to be closed, so we set the show value to false.

3.2 Click to switch the expanded state

We need to bind the click event to the li element in the title part to achieve the click expand/collapse effect. We can switch the expansion state corresponding to each list by calling the toggle method. The specific code is as follows:

methods: {
  toggle(index) {
    const item = this.dataList[index];
    item.show = !item.show;
  },
},

In the toggle method, we get the current list item item and control the expansion content by modifying the show parameter. Show and hide.

4. Style settings

Finally, we need to style the list so that it can be displayed more beautifully.

li {
  background: #eee;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

li:hover {
  background: #ccc;
}

div {
  padding: 10px;
}

In CSS, we style each li element. We also changed the background color on mouse hover. The style of the expanded content section has also been set simply.

At this point, we have completed the implementation of the collapsible list. The complete code is as follows:

<template>
  <div>
    <ul>
      <li v-for="(item,index) in dataList" :key="index" @click="toggle(index)">
        {{ item.title }}
      </li>
    </ul>
    <div v-for="(item,index) in dataList" :key="index">
      <div v-show="item.show">{{ item.content }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          title: "列表标题1",
          content: "列表1的详细内容",
          show: false,
        },
        {
          title: "列表标题2",
          content: "列表2的详细内容",
          show: false,
        },
        {
          title: "列表标题3",
          content: "列表3的详细内容",
          show: false,
        },
      ],
    };
  },
  methods: {
    toggle(index) {
      const item = this.dataList[index];
      item.show = !item.show;
    },
  },
};
</script>

The above is the detailed content of How to implement a collapsible list using Vue?. For more information, please follow other related articles on the PHP Chinese website!