<el-header>如何在导航栏配置时间
时间: 2023-12-12 16:05:49 浏览: 133
您可以在导航栏中添加一个包含当前时间的组件。在Vue.js中,您可以使用computed属性来获取当前时间,并在模板中使用该属性来显示时间。以下是一个示例:
```html
<template>
<el-header>
<div class="nav-item">Home</div>
<div class="nav-item">About</div>
<div class="nav-item">Contact</div>
<div class="nav-item">{{ currentTime }}</div>
</el-header>
</template>
<script>
export default {
computed: {
currentTime() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
return `${hours}:${minutes}:${seconds}`;
},
},
};
</script>
<style>
.nav-item {
margin-right: 20px;
}
</style>
```
在这个示例中,我们使用了Element UI中的`el-header`组件来创建导航栏,并在其中添加了四个导航项。第四个导航项使用了一个computed属性来获取当前时间,并在模板中使用该属性来显示时间。您可以调整样式来使其适应您的项目需求。