如何使用 Vue 實現可折疊列表？

Vue 是一款受歡迎的 JavaScript 函式庫，廣泛應用於 Web 開發領域。在 Vue 中，我們可以很方便地實現各種元件和互動效果。其中，可折疊清單是一個比較實用的元件，它可以將清單資料分組，提高資料展示的可讀性，同時又能夠在需要展開具體內容時展開，方便使用者查看詳細資料。本文就將介紹如何使用 Vue 實作可折疊清單。

1. 準備工作

在使用Vue 實作可折疊清單之前，我們需要先準備好以下工作：

1.1 Vue 環境：安裝Vue. js，可以透過官網下載或CDN 引入的方式引入。

1.2 數據準備：準備好需要展示的數據，可以是一個陣列或對象，每一項包含展示數據的標題和內容。

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 時，展開內容將會顯示出來。

3. 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 參數來控制展開內容的顯示和隱藏。

4. 樣式設定

最後，我們需要對清單進行樣式設置，以便更美觀地顯示。

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>

以上是如何使用 Vue 實現可折疊列表？的詳細內容。更多資訊請關注PHP中文網其他相關文章！