帮我生成个vue垃圾分类知识库页面,供关于垃圾分类的知识和指导,帮助用户正确分类垃圾
时间: 2023-03-19 17:24:47 浏览: 63
好的,下面是一个简单的Vue垃圾分类知识库页面的示例代码:
```vue
<template>
<div class="container">
<h1>垃圾分类知识库</h1>
<div class="row">
<div class="col-md-4">
<h2>可回收垃圾</h2>
<ul>
<li v-for="item in recyclableItems">{{ item }}</li>
</ul>
</div>
<div class="col-md-4">
<h2>有害垃圾</h2>
<ul>
<li v-for="item in hazardousItems">{{ item }}</li>
</ul>
</div>
<div class="col-md-4">
<h2>厨余垃圾</h2>
<ul>
<li v-for="item in kitchenItems">{{ item }}</li>
</ul>
<h2>其他垃圾</h2>
<ul>
<li v-for="item in otherItems">{{ item }}</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: "KnowledgeBase",
data() {
return {
recyclableItems: [
"废纸",
"塑料瓶",
"玻璃瓶",
"易拉罐",
"金属罐",
"家电等可回收物品"
],
hazardousItems: [
"废电池",
"废灯管",
"废药品",
"废油漆",
"废杀虫剂",
"其他化学物品"
],
kitchenItems: [
"剩菜剩饭",
"果皮果核",
"鱼骨鸡骨",
"绿植",
"家养宠物粪便"
],
otherItems: [
"纸巾",
"卫生巾",
"烟蒂",
"塑料袋",
"陶瓷碎片",
"其他难以归类的物品"
]
};
}
};
</script>
<style>
.container {
margin: 30px auto;
max-width: 960px;
padding: 0 15px;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-md-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
padding-right: 15px;
padding-left: 15px;
}
h1 {
margin-top: 0;
margin-bottom: 20px;
font-size: 36px;
text-align: center;
}
h2 {
margin-top: 40px;
margin-bottom: 20px;
font-size: 24px;
text-align: center;
}
</style>
```
你可以将该代码复制到.vue文件中,并根据实际需要进行适当修改,例如添加更多的垃圾分类信息、改