vue写一个简约的公告栏
时间: 2024-05-05 15:17:09 浏览: 21
以下是一个简约的公告栏组件的代码示例:
```
<template>
<div class="notice-board">
<div class="notice-title">
{{ title }}
</div>
<div class="notice-content">
<ul>
<li v-for="notice in notices" :key="notice.id">
{{ notice.message }}
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "NoticeBoard",
props: {
title: {
type: String,
default: "公告"
},
notices: {
type: Array,
default: []
}
}
};
</script>
<style>
.notice-board {
background-color: #f5f5f5;
border-radius: 4px;
padding: 16px;
}
.notice-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 16px;
}
.notice-content ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.notice-content li {
margin-bottom: 8px;
}
</style>
```
使用该组件时,可以传入 `title` 和 `notices` 两个 props,分别表示公告栏的标题和公告列表。例如:
```
<template>
<div>
<NoticeBoard :title="title" :notices="notices" />
</div>
</template>
<script>
import NoticeBoard from "@/components/NoticeBoard.vue";
export default {
name: "App",
components: {
NoticeBoard
},
data() {
return {
title: "最新公告",
notices: [
{ id: 1, message: "本站新增了XXX功能,欢迎体验!" },
{ id: 2, message: "双十一大促销,全场8折起!" },
{ id: 3, message: "本站将于下周三进行系统升级,届时将无法访问,敬请谅解。" }
]
};
}
};
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)