Vue 中如何實作分組清單？
Vue 作為一個流行的前端框架，對於資料的處理和渲染有很好的支援。在實際的應用中，我們經常會遇到需要展示分組清單的情況，例如展示商品分類、展示城市清單等。那麼，在 Vue 中如何實作分組清單呢？下面就來詳細介紹一下。
在實作分組清單之前，我們需要先設計好資料結構。在 Vue 的實作中，我們通常會採用一個陣列來儲存所有的數據，並透過分組的方式來展示。具體來說，我們可以使用物件數組來實現分組列表。物件數組中的每個元素表示一條數據，其中的某個屬性表示所屬的分組，例如：
const data = [
{ name: '手机', category: '电子产品' },
{ name: '电视', category: '电子产品' },
{ name: '冰箱', category: '家用电器' },
{ name: '洗衣机', category: '家用电器' },
{ name: '自行车', category: '运动健身' },
{ name: '跑步机', category: '运动健身' },
]在這個例子中，我們使用category 屬性來表示所屬的分組。
在設計好資料結構後，我們需要將資料分組處理，以便於後續的展示。在 Vue 中，我們可以透過 computed 計算屬性來實現分組處理。具體來說，我們可以定義一個計算屬性，將資料依照分組歸類。程式碼如下：
computed: {
categorizedData() {
const result = {}
this.data.forEach(item => {
if (!result[item.category]) {
result[item.category] = []
}
result[item.category].push(item)
})
return result
}
}在這個範例中，我們定義了一個名為categorizedData 的計算屬性，該屬性會將資料依照分組進行歸類，傳回一個包含所有分組資料的對象。其中，我們使用了一個空物件 result 來儲存分類後的數據，遍歷所有數據，將每個數據加入其所屬的分組中。
在資料處理完成後，我們需要將分組資料渲染到頁面上。在 Vue 中，我們可以使用 v-for 指令來實作清單渲染。具體來說，我們可以在模板中嵌套兩層 v-for 指令，遍歷分組資料並渲染到頁面上。程式碼如下：
<template>
<div>
<ul v-for="(items, category) in categorizedData" :key="category">
<li>{{ category }}</li>
<ul>
<li v-for="item in items" :key="item.name">{{ item.name }}</li>
</ul>
</ul>
</div>
</template>在這個範例中，我們在外層使用v-for 來遍歷分組數據，其中(items, category) in categorizedData 表示遍歷對象中的每個屬性和屬性值。內層的 v-for 則用於遍歷每個分組的數據，將其渲染到子列表中。透過這種方式，我們可以將分組資料按照分類展示在頁面上。
完整程式碼如下：
<template>
<div>
<ul v-for="(items, category) in categorizedData" :key="category">
<li>{{ category }}</li>
<ul>
<li v-for="item in items" :key="item.name">{{ item.name }}</li>
</ul>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{ name: '手机', category: '电子产品' },
{ name: '电视', category: '电子产品' },
{ name: '冰箱', category: '家用电器' },
{ name: '洗衣机', category: '家用电器' },
{ name: '自行车', category: '运动健身' },
{ name: '跑步机', category: '运动健身' },
],
}
},
computed: {
categorizedData() {
const result = {}
this.data.forEach(item => {
if (!result[item.category]) {
result[item.category] = []
}
result[item.category].push(item)
})
return result
},
},
}
</script>透過以上程式碼，我們就可以實作 Vue 中的分組列表，並將資料依照分組展示在頁面上。
以上是Vue 中如何實作分組清單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
