在商品展示頁(yè)面，展示商品分類是一個(gè)非常重要的功能。使用Vue框架可以讓開(kāi)發(fā)者輕易地實(shí)現(xiàn)這個(gè)功能。下面，我們將會(huì)逐步介紹如何使用Vue展示商品分類。

首先，在Vue的模板中，用v-for指令展示分類列表。v-for指令可以遍歷數(shù)組并渲染頁(yè)面。我們可以定義一個(gè)包含分類信息的數(shù)組，然后使用v-for指令遍歷數(shù)組，并使用li標(biāo)簽把每個(gè)分類渲染到頁(yè)面中。

{{ category.name }}

接下來(lái)，我們需要將分類信息從后端獲取并存儲(chǔ)到Vue的data中。在Vue的生命周期函數(shù)created中使用axios庫(kù)發(fā)送異步請(qǐng)求獲取數(shù)據(jù)，然后存儲(chǔ)到data中。在模板中使用v-if指令判斷是否已經(jīng)獲取了數(shù)據(jù)并渲染頁(yè)面。

data: {
categories: []
},
created() {
axios.get('https://example.com/api/categories')
.then(response =>{
this.categories = response.data
})
.catch(error =>{
console.log(error)
})
}

在每個(gè)分類的li標(biāo)簽上添加click事件，當(dāng)點(diǎn)擊分類的時(shí)候，使用Vue的computed屬性根據(jù)分類獲取對(duì)應(yīng)的商品數(shù)據(jù)。computed屬性可以基于現(xiàn)有數(shù)據(jù)計(jì)算出新的數(shù)據(jù)，避免對(duì)data中的數(shù)據(jù)進(jìn)行直接修改。

{{ category.name }}
...
computed: {
filteredProducts() {
if (this.selectedCategory !== null) {
return this.products.filter(product =>product.category === this.selectedCategory)
} else {
return this.products
}
}
}

最后，在頁(yè)面中展示商品列表，使用v-for指令遍歷計(jì)算好的商品數(shù)據(jù)，并渲染到頁(yè)面中。在商品列表中，也可以使用Vue的computed屬性根據(jù)價(jià)格、銷量等排序或搜索商品，從而提升用戶體驗(yàn)。

{{ product.name }} - {{ product.price }}

通過(guò)上述步驟，我們可以使用Vue輕松地實(shí)現(xiàn)商品分類的展示。