使用vue 编写一个顶部导航
时间: 2024-03-03 22:50:29 浏览: 14
好的,以下是一个使用 Vue.js 编写的简单顶部导航示例:
```
<template>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</template>
<script>
export default {
name: 'TopNav',
data() {
return {}
}
}
</script>
<style>
nav {
background-color: #f1f1f1;
padding: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
li {
margin-right: 20px;
}
a {
color: black;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
a:hover {
color: blue;
}
</style>
```
在上面的代码中,我们创建了一个 Vue 组件 `TopNav`,该组件包含一个简单的 HTML 导航菜单。我们使用 CSS 样式来美化导航菜单,并通过 data() 函数来定义组件的数据。在实际开发中,你可以根据需要自定义导航菜单的样式和交互效果。