当前位置：首页 > 文章列表 > 文章 > 前端 > 实现 Vue 中的可折叠列表功能步骤

实现 Vue 中的可折叠列表功能步骤

2024-03-27 19:40:29 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

从现在开始，努力学习吧！本文《实现 Vue 中的可折叠列表功能步骤》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

Vue 是一款流行的 JavaScript 库，广泛应用于 Web 开发领域。在 Vue 中，我们可以很方便地实现各种组件和交互效果。其中，可折叠列表是一个比较实用的组件，它可以将列表数据分组，提高数据展示的可读性，同时又能够在需要展开具体内容时进行展开，方便用户查看详细信息。本文就将介绍如何使用 Vue 实现可折叠列表。

准备工作

在使用 Vue 实现可折叠列表之前，我们需要先准备好以下工作：

1.1 Vue 环境：安装 Vue.js，可以通过官网下载或 CDN 引入的方式引入。

1.2 数据准备：准备好需要展示的数据，可以是一个数组或对象，每一项包含展示数据的标题和内容。

HTML 结构

我们的可折叠列表主要由两个部分组成，一个是展示列表的标题部分，另一个是展示列表内容的部分。其中，标题部分需要设置 click 事件来触发内容部分的展开和收起。因此，我们可以利用 Vue 的 v-for 指令循环渲染列表，同时绑定 click 事件，如下所示：

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

在这段代码中，我们使用了一个包裹元素，包含了一个 ul 和一组 div。其中，ul 中渲染了标题部分的多个 li，每一个 li 的内容为 item.title。而每个 li 对应的展开内容则通过 v-show 指令来控制是否显示。当 item.show 为 true 时，展开内容将会显示出来。

JavaScript 逻辑

接下来，我们需要编写一些 JavaScript 逻辑来实现可折叠列表的功能，具体步骤如下：

3.1 定义数据结构

我们的数据应该包括两部分，一部分是列表的标题，另一部分是列表对应的内容。因此，我们可以定义一个如下数据结构：

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

其中，show 参数的作用是控制展开部分是否显示。在初始情况下，我们希望展开部分都是关闭状态，因此，我们将 show 值设为 false。

3.2 点击切换展开状态

我们需要在标题部分的 li 元素上绑定点击事件，以实现点击展开/收起的效果。我们可以通过调用 toggle 方法来切换每个列表对应的展开状态，具体代码如下：

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

在 toggle 方法中，我们获取到当前的列表项 item，并通过修改 show 参数来控制展开内容的显示和隐藏。

样式设置

最后，我们需要对列表进行样式设置，以便更加美观地显示。

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

li:hover {
  background: #ccc;
}

div {
  padding: 10px;
}

在 CSS 中，我们设置了每个 li 元素的样式。在鼠标悬停时，我们还将背景颜色进行了变化。展开内容部分的样式也进行了简单的设置。

至此，我们就完成了可折叠列表的实现。完整代码如下：

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

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

li:hover {
  background: #ccc;
}

div {
  padding: 10px;
}
</style>

到这里，我们也就讲完了《实现 Vue 中的可折叠列表功能步骤》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于VUE,可折叠,列表的知识点！

VUE 可折叠列表