How to implement a collapsed list using Vue?

Vue is a popular JavaScript framework that makes it easy to build interactive web applications. In this article, we will discuss how to implement a collapsed list using Vue. Collapse lists are a common interactive component that allow users to expand and collapse their content.

In Vue, we can easily implement collapsed lists using the instructions v-if and v-show. These two directives have similar functions and can control the visibility of elements. v-if will add or remove elements based on conditions, while v-show will only toggle the displayed or hidden state of an element.

First, we need to create a Vue instance and mount it on an HTML element. Then define an array that will contain all the items in the collapsed list. In this example, we assume that the list items are in the following format:

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

We also need to define a button in the template that toggle the visibility of each list item. We can achieve this using the v-show directive. When the button is clicked, we will toggle the show/hide state of the contentDiv.

The following is a basic folding list component template:

<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>

Next, we need to define an array of list items and a toggle function in the Vue instance to toggle the visibility of each list item sex. The toggle function will accept one parameter, which is the index of the list item to toggle. This function inverts the showContent property of the item and also updates the component's state.

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;
    }
  }
})

Finally, we need to add some CSS styles to the component to control its appearance and layout.

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;
}

Now, we have completed a simple folding list component. We can use this component to display an interactive list in our application. We can extend this component by adding custom styles and other functionality.

In short, Vue is a very powerful front-end framework that provides many useful features that make building interactive web applications easier. Using Vue, we can easily implement complex UI components, including collapse lists.

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