vue商品分類列表頁面 vue 列表
BOL優(yōu)選生活找貨選品2025-08-116131
以下是一個基本的 Vue.js 商品分類列表頁面的示例代碼：
<template>
<div class="category-list">
<h1>商品分類列表</h1>
<ul>
<li v-for="item in categories" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
categories: [
{ id: 1, name: '電子產(chǎn)品' },
{ id: 2, name: '家居用品' },
{ id: 3, name: '服裝鞋帽' },
// 更多商品分類...
],
};
},
};
</script>
<style scoped>
.category-list {
width: 80%;
margin: 0 auto;
}
.category-list h1 {
text-align: center;
}
.category-list ul {
list-style: none;
padding: 0;
}
.category-list li {
border-bottom: 1px solid #ccc;
padding: 10px;
}
</style>這個示例中，我們使用了 Vue.js 的 v-for 指令來遍歷 categories 數(shù)組，并使用 :key 屬性為每個分類設(shè)置一個唯一的標(biāo)識符。在模板中，我們使用 <li> 標(biāo)簽和 v-for 指令來顯示每個分類的名稱。同時，我們還使用了 CSS 樣式來美化頁面的布局和樣式。
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
評論列表
這是一個基本的 Vue.js 商品分類列表頁面的示例代碼，它使用 v-for 指令來遍歷 categories 數(shù)組，并使用 :key 屬性為每個分類設(shè)置一個唯一的標(biāo)識符，在模板中，我們使用 <li> 標(biāo)簽和 v-for 指令來顯示每個分類的名稱，我們還使用了 CSS 樣式來美化頁面的布局和樣式。
