使用vue框架写一个京东网页的商品分类栏
时间: 2023-05-16 14:04:42 浏览: 155
好的,以下是使用 Vue 框架编写京东商品分类栏的示例代码:
<template>
<div class="category">
<ul>
<li v-for="(category, index) in categories" :key="index">
<a :href="category.link">{{ category.name }}</a>
<ul v-if="category.subCategories">
<li v-for="(subCategory, subIndex) in category.subCategories" :key="subIndex">
<a :href="subCategory.link">{{ subCategory.name }}</a>
</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
categories: [
{
name: "家用电器",
link: "#",
subCategories: [
{ name: "电视", link: "#" },
{ name: "空调", link: "#" },
{ name: "洗衣机", link: "#" },
{ name: "冰箱", link: "#" },
{ name: "厨卫大电", link: "#" },
{ name: "生活电器", link: "#" },
{ name: "个护健康", link: "#" },
{ name: "家庭影音", link: "#" },
{ name: "进口电器", link: "#" },
],
},
{
name: "手机数码",
link: "#",
subCategories: [
{ name: "手机", link: "#" },
{ name: "游戏", link: "#" },
{ name: "相机", link: "#" },
{ name: "数码配件", link: "#" },
{ name: "影音娱乐", link: "#" },
{ name: "智能设备", link: "#" },
],
},
{
name: "电脑办公",
link: "#",
subCategories: [
{ name: "电脑整机", link: "#" },
{ name: "电脑配件", link: "#" },
{ name: "外设产品", link: "#" },
{ name: "游戏设备", link: "#" },
{ name: "网络产品", link: "#" },
{ name: "办公设备", link: "#" },
{ name: "文具耗材", link: "#" },
{ name: "服务产品", link: "#" },
],
},
{
name: "家居家装",
link: "#",
subCategories: [
{ name: "厨具", link: "#" },
{ name: "家纺", link: "#" },
{ name: "家具", link: "#" },
{ name: "家装建材", link: "#" },
{ name: "灯具", link: "#" },
{ name: "家居饰品", link: "#" },
{ name: "清洁用品", link: "#" },
{ name: "宠物生活", link: "#" },
],
},
{
name: "美妆个护",
link: "#",
subCategories: [
{ name: "面部护肤", link: "#" },
{ name: "身体护理", link: "#" },
{ name: "口腔护理", link: "#" },
{ name: "女性护理", link: "#" },
{ name: "香水彩妆", link: "#" },
{ name: "男士护理", link: "#" },
{ name: "美妆工具", link: "#" },
],
},
],
};
},
};
</script>
<style>
.category {
background-color: #f5f5f5;
padding: 10px;
}
.category ul {
list-style: none;
margin: 0;
padding: 0;
}
.category li {
display: inline-block;
margin-right: 20px;
position: relative;
}
.category li ul {
background-color: #fff;
border: 1px solid #ccc;
display: none;
left: 0;
padding: 10px;
position: absolute;
top: 100%;
width: 200px;
z-index: 1;
}
.category li:hover ul {
display: block;
}
</style>
请注意,这只是一个简单的示例代码,实际的京东商品分类栏可能更加复杂。