Vue 是一個流行的 JavaScript 框架，使用 Vue 可以輕鬆建立互動式的 Web 應用程式。在本文中，我們將討論如何使用 Vue 實作折疊清單。折疊清單是一種常見的互動式元件，它允許使用者展開和收起其內容。
在 Vue 中，我們可以使用指令 v-if 和 v-show 輕鬆地實作折疊清單。這兩個指令的作用相似，都可以控制元素的可見度。 v-if 會基於條件新增或移除元素，而 v-show 則只會切換元素的顯示或隱藏狀態。
首先，我們需要建立一個 Vue 實例，並將其掛載到一個 HTML 元素上。然後定義一個數組，該數組將包含折疊列表中的所有項目。在本例中，我們假設清單項目的格式如下：
{
title: 'Item 1',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},我們還需要在範本中定義一個按鈕，用於切換每個清單項目的可見性。我們可以使用 v-show 指令來實現這一點。當按鈕被點擊時，我們將切換 contentDiv 的顯示/隱藏狀態。
以下是一個基本的折疊列表元件模板：
<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>接下來，我們需要在Vue 實例中定義列表項數組和一個toggle 函數，用於切換每個列表項的可見性。 toggle 函數將接受一個參數，該參數是要切換的列表項的下標。函數將在該項的 showContent 屬性上取反，同時也更新了元件的狀態。
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;
}
}
})最後，我們需要為元件添加一些 CSS 樣式，來控制元件的外觀和佈局。
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;
}現在，我們已經完成了一個簡單的折疊清單元件。我們可以使用這個元件來在我們的應用程式中顯示一個互動的清單。我們可以透過添加自訂樣式和其他功能，來擴展這個元件。
總之，Vue 是一個非常強大的前端框架，它提供了許多有用的功能，使得建立互動式的 Web 應用程式變得更加容易。使用 Vue，我們可以輕鬆實現複雜的 UI 元件，包括折疊列表。
以上是如何使用 Vue 實現折疊列表？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
